Take a look at the following example, which includes a sample HTML form:
<title>JQuery Form Submission Example</title>
<!-- Our example form -->
<form action="submit.php" id="example_form">
Your Email Address:
<input type="text" name="email_address">
<button type="button" id="submit_form">Submit</button>
<!-- Include JQuery -->
//When the document is ready.
//Attach a CLICK event handler to our #submit_form button.
//If the user clicks on the button, then submit
In the example above, you can see the following:
- We have a HTML form with the ID “example_form“.
- Inside that form, we have a button element with the ID “submit_form“.
The ID attribute is extremely important in this case as it allows us to easily access the element using jQuery.
- Inside our ready method, we attached a “click” event listener to our “submit_form” button. This event listener will “listen” for any clicks on our button.
- If our listener detects that the “submit_form” button has been clicked, it will call the submit() method on our “example_form” form. This essentially triggers the submit event on our HTML form.
If you run the example above, you should see that the form submits and that it attempts to redirect to a URL at submit.php