Forms are a structured way to collectively gather multiple pieces of information from a user. Forms may be made up of HTML fields like inputs, radio buttons, check boxes and select drop downs. Jquery offers a simple way to select, read and manipulate these form HTML elements. Suppose you have an input field as shown in our demo. To get what the value of what user has give as name we will code: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex1.js?actionable=true The val() function gets the value of whatever has been written in the input field and pops it up as a message.val() function is also used to set values of out input fields. We can do: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex2.js?actionable=true Running the above piece of code will write "brian" to the Name text field.To check if a checkbox is checked: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex3.js?actionable=true Sometimes we may want to select multiple text fields at the same time. We can for example want to check if all text fields are filled: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex4.js?actionable=true The $(":input") selects all kinds of html inputs including input, textarea, select, and button elements. $(':text') Selects all text fields. In the code below we loop through our one text input field to find out if any of them is empty: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex5.js?actionable=true Other selectors that are commonly used in form operations include:$(':password') Selects all password fields.$(':radio') Selects all radio buttons.$(':checkbox') Selects all checkboxes.$(':submit') Selects all submit buttons. $(':image') Selects all image buttons. $(':reset') Selects all reset buttons.$(':button') Selects all fields with type button.$(':file') Selects all file fields (used for uploading a file)$(':hidden') Selects all hidden fields.Jquery offers methods to control form submission via the submit() function. We can use submit() to perform form validation or reroute data to different destinations. The following example will check whether the a user has filled in his name and whether he has chosen an option before giving a warning for it to be filled. https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex6.js?actionable=true Sometimes we may need to disable form fields temporarily . The next example will disable the check box, preventing the user from interacting with it. https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex7.js?actionable=true
$(document).ready(function(){
XT1
});
</script>
Live demo
<div id="minidivpage" class="example-live"><h4 class="heading-4">Webflow form:</h4><div class="w-form"><form id="email-form" name="email-form" data-name="Email Form" method="get" aria-label="Email Form"><label for="name">Name</label><input type="text" class="w-input" maxlength="256" name="Name" data-name="Name" placeholder="" id="name"><label for="email">Email Address</label><input type="email" class="w-input" maxlength="256" name="Email" data-name="Email" placeholder="" id="email"><select id="field" name="Field" data-name="Field" class="w-select"><option value="">Select one...</option><option value="First">First Choice</option><option value="Second">Second Choice</option><option value="Third">Third Choice</option></select><label class="w-checkbox"><input type="checkbox" id="checkbox" name="Checkbox" data-name="Checkbox" class="w-checkbox-input"><span class="w-form-label" for="Checkbox">Checkbox</span></label><input type="submit" value="Submit" data-wait="Please wait..." class="w-button"></form><div class="w-form-done" tabindex="-1" role="region" aria-label="Email Form success"><div>Thank you! Your submission has been received!</div></div><div class="w-form-fail" tabindex="-1" role="region" aria-label="Email Form failure"><div>Oops! Something went wrong while submitting the form.</div></div></div></div>
$(document).ready(function() {
XT1
});
</script>
