Home » jQuery Form Submit With Examples

jQuery Form Submit With Examples

Last updated on June 15, 2022 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 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!

 
 

Leave a Comment