jQuery Form Submit With Examples

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.

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 an 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 the 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 an 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 a 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
9. Laravel 9 Multi Language Routes With Auth Routes
10. How To Update Pivot Table In Laravel
11. How To Install Vue In Laravel 8 Step By Step
12. How To Handle Failed Jobs In Laravel
13. Best Ways To Define Global Variable In Laravel
14. How To Get Latest Records In Laravel
15. Laravel Twilio Send SMS Tutorial With Example
16. How To Pass Laravel URL Parameter
17. Laravel 9 Resource Controller And Route With Example
18. Laravel 9 File Upload Tutorial With Example
19. How To Schedule Tasks In Laravel With Example
20. Laravel Collection Push() And Put() With Example

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!