Form Posting via jQuery

[TechBoyJK]

Thoughts about the best way to submit a form via jQuery?

I'm loading a div via ajax that has a form on it. When someone hits 'submit' on the form, I'm assuming I create an 'onClick' function that disables the submit buttton, gathers the form variables, and submits them via ajax.

Is this the right function to be looking at?

http://api.jquery.com/jQuery.post/

 

[PhatoseAlpha]

No. That's for loading data from a server via Ajax as a post request. You want this one http://api.jquery.com/submit/

 

[wand3r3r]

You can either override a button, or the form's submit event. Basically either will work and it depends if the form submission button is inside the form or not.

// Override the button's click event (the button can be located anywhere, even outside the form)
$("#inputButtonId").click(function() {
  
   $.ajax({
       type: 'POST',
       data: { $('#formId').serialize(); }
       success: function (response) {
           // do something with the response
       }
   });

   // Prevent the form from submitting
   return false;
});

Alternatively:

// Override the form's submit
$("#formId").submit(function() {
  $.ajax({
       type: 'POST',
       data: { $('#formId').serialize(); }
       success: function (response) {
           // do something with the response
       }
   });
});

 

[GammaLaser]

If I remember correctly you will generally want to hook into the submit event of the form (as opposed to a click event of a button) because if the user manages to submit the form without the button (through the keyboard for example) then returning false from the submit event would be the only sure-fire way to catch the event.

 

[Dratickon]

If I remember correctly you will generally want to hook into the submit event of the form (as opposed to a click event of a button) because if the user manages to submit the form without the button (through the keyboard for example) then returning false from the submit event would be the only sure-fire way to catch the event.

Very true, as an errant swipe of the enter key can unintentionally submit the form if you bind it to the click event. Also, the preventDefault() method is what I typically use to prevent/control the form submission, but returning false also works if you understand what it really does and you're sure it's what you want.