Home » jQuery Form Submit With Examples

jQuery Form Submit With Examples

Last updated on December 24, 2020 by

In this tutorial, we will see jQuery form submission with examples by using different ways like submit() method, click() event, etc. Let’s just dive into it.

Table of Contents
1. Use The jQuery submit() Method/Event
2. Use The jQuery click() Event
3. Submit AJAX Form

01 Use The jQuery submit() Method/Event

You can use submit() in two ways either as a method or an event. If you are using a click() event then you have to use submit() as a method. And if you are using any submit button in your form then you can use submit() as an event. Let’s see both examples for better understanding.

Please note that if you have input/button type=”submit” then you can use below example

Let’s assume we have a simple form with type submit button as below:

<form id="profileForm" action="">
   <table>
      <tr>
         <td>Name:</td>
         <td><input type="text" name="txtName"/></td>
      </tr>
      <tr>
         <td>City:</td>
         <td><input type="text" name="txtCity"/></td>
      </tr>
      <tr>
         <td colspan="2">
            <button type="submit">Submit</button>
         </td>
      </tr>
   </table>
</form>

Then we can use submit() as a event as below:

jQuery(document).ready(function() {
      
   jQuery('#profileForm').submit(function(){
      alert('successfully submitted form');

      // Your other code goes here
   });
});

Let’s see further how to use submit() as method with click event.

02 Use The jQuery click() Event

We must assign an ID to the button to use the click() event. Moreover, we also need to use .preventDefault() method to prevent the default action of the button. For example, if you have added an input/button with the type submit then the form will automatically be submitted before the jQuery code. Let’s see an example.

Let’s assume we have a simple form as below:

<form id="profileForm" action="">
   <table>
      <tr>
         <td>Name:</td>
         <td><input type="text" name="txtName"/></td>
      </tr>
      <tr>
         <td>City:</td>
         <td><input type="text" name="txtCity"/></td>
      </tr>
      <tr>
         <td colspan="2">
            <button id="btnSubmit">Submit</button>
         </td>
      </tr>
   </table>
</form>

Then we can use click() event and submit() as a method below to submit your form:

jQuery(document).ready(function() {
      
   jQuery('#btnSubmit').click(function(e){
      e.preventDefault();
      jQuery('#profileForm').submit();
   });
});

03 Submit AJAX Form

When you have a Form with input/button type submit then you can use the following submit() event to submit the AJAX form. Make sure you are returning data in JSON format from your backend server.

jQuery(document).ready(function() {
      
   jQuery('#profileForm').submit(function(e){
      e.preventDefault();

      let formData = $('#profileForm').serialize();
 
      $.ajax({
        method: 'POST',
        url: 'processProfile.php',
        data: formData,
        success: function (response) {
            let res = JSON.parse(response);
        },
        error: function (response) {
            let res = JSON.parse(response.responseText);
        },
      });

   });

});

That’s it for now. We hope this article helped you to learn jQuery form submit with examples.

Additionally, read our guide:

  1. How To Check If An Element Is Hidden In jQuery
  2. Check If Array Is Empty Or Undefined In JavaScript
  3. How To Detect IE Browser In JavaScript
  4. Simple Date formatting In JavaScript
  5. AJAX PHP Post Request With Example
  6. Difference Between == vs === in JavaScript
  7. How To Remove A Specific Item From An Array In JavaScript
  8. How To Check Array Contains A Value In JavaScript

Please let us know in the comments if everything worked as expected, your issues, or any questions. If you think this article saved your time & money, please do comment, share, like & subscribe. Thank you in advance 🙂. Keep Smiling! Happy Coding!

 
 

Leave a Comment

*

code