Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX CODE RESET FORM WITH BUTTON
Need to reset user forms for your Wix website? This tutorial will show you how to clear user input fields from your online forms with a simple button. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
Design your online form by adding text, user input and button elements. Then create a database to store form submission information. Next, add a dataset element to your page and link all inputs fields and submit button. Finally, add Wix Code to your page.
Users can click on the "Reset" button to clear all form fields.
Design your online form by adding text, user input and button elements. Then create a database to store form submission information. Next, add a dataset element to your page and link all inputs fields and submit button. Finally, add Wix Code to your page.
THE ELEMENTS
The Page
User Inputs:
-
First Name Field: #input1
-
Last Name Field: #input2
-
Email Field: #input3
-
Phone Field: #input4
Button Element:
-
Submit Button: #Submit
-
Reset Button: #Reset
The Database
Create a database Courses (dataset1).
Recommended fields:
-
First Name ID: fname
-
Last Name ID: lname
-
Email ID: email
-
Phone ID: phone
-
Course Type ID: course
-
Course Date ID: date
-
Course Timing ID: time
-
Email ID: email
THE CODE
Page Code
// Reset Button //
export function Reset_click(event, $w) {
$w('#input1').value = "";
$w('#input2').value = "";
$w('#input3').value = "";
$w('#input4').value = "";
$w('#dropdown1').value = "Select Course";
$w('#dropdown2').value = "Select Timing";
// Reset validation - Otherwise fields will show error //
$w('#input1').resetValidityIndication();
$w('#input2').resetValidityIndication();
$w('#input3').resetValidityIndication();
$w('#input4').resetValidityIndication();
$w('#dropdown1').resetValidityIndication();
$w('#dropdown2').resetValidityIndication();
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.