Wix Tutorial - Reset the value of an input element
When having a form or a search bar it's helpful to be able to clear the input element with a button or X using Wix Code.
Elements:
User Input:
-
Name: #name
-
Email: #email
-
Phone: #phone
-
How would you like to be contacted?: #dropdown1
-
Message: #message
Button Element:
-
Reset Button: #resetButton | Add onClick event in the Properties Panel
Wix Code:
export function resetButton_click(event) {
$w('#name').value = "";
$w('#email').value = "";
$w('#phone').value = "";
$w('#message').value = "";
$w('#dropdown1').value = "How would you like to be contacted?";
$w('#name').resetValidityIndication();
$w('#email').resetValidityIndication();
$w('#phone').resetValidityIndication();
$w('#message').resetValidityIndication();
$w('#dropdown1').resetValidityIndication();
}
Demo:
Websites designed by WixCreate that use the above Wix Code:
We have used this code on our Example Store website and on this WixCreate website to clear the search bar after the close button is clicked. See: Example Store WixCreate.