How to submit a form using jQuery.

This is a short tutorial on how to submit a HTML form using the jQuery library. As you probably already know, jQuery is a JavaScript library that comes packed with a wide range of useful features. One of those handy “features” that we can use in this case is the .submit() method.

Take a look at the following example, which includes a sample HTML form:

In the example above, you can see the following:

  1. We have a HTML form with the ID “example_form“.
  2. 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.

In our JavaScript code, we did the following:

  1. We wrapped all of our code inside the $( document ).ready() method. This ensures that our JavaScript code is not executed until the jQuery library has loaded and the DOM is ready.
  2. 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.
  3. 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

Facebook Comments