Submit form using AJAX and jQuery

Question

It seems like this should be something built into jQuery without the need for more than a few lines of code, but I can't find the "simple" solution. Say, I have an HTML form:

<form method="get" action="page.html">
    <input type="hidden" name="field1" value="value1" />
    <input type="hidden" name="field2" value="value2" />
    <select name="status">
         <option value=""></option>
         <option value="good">Good</option>
         <option value="bad">Bad</option>
    </select>
</form>

When someone changes the select field, I would like to submit the form using ajax to update the database. I thought there would be some way to do the following without manually creating the values/attributes, just send them all, like:

$("select").change(function(){
    $.get("page.html?" + serializeForm());
});

What am I missing?

Re: the update, You probably don't want this to be a GET request since you're passing data to the server. But yes, that's the general idea. You're welcome :) — rfunduk, Jan 10 '09 at 19:02
Here is the way i post form data to action on server http://tryconcepts.blogspot.in/2012/02/post-form-data-using-jquery-post-or.html — yashpal, Feb 29 '12 at 13:45

score 146 · Answer 1 · answered Jan 08 '09 at 17:28

146

First give your form an id attribute, then use code like this:

$(document).ready( function() {
  var form = $('#my_awesome_form');

  form.find('select:first').change( function() {
    $.ajax( {
      type: "POST",
      url: form.attr( 'action' ),
      data: form.serialize(),
      success: function( response ) {
        console.log( response );
      }
    } );
  } );

} );

So this code uses .serialize() to pull out the relevant data from the form. It also assumes the select you care about is the first one in the form.

For future reference, the jQuery docs are very, very good.

answered Jan 08 '09 at 17:28

rfunduk

30,053
5
59
54

7

A very important point, that may be completely obvious to many but was definitely not so to me which is omitted here and in all the other SO posts on this subject is that in order to be successful you must ensure that the button you are using to trigger the event that causes the submit of the form via ajax IS NOT type submit! Else this will always fail. The serialize approach here is neat. – codepuppy Oct 20 '12 at 10:15
8

Since this code handles submitting the form on change of a select box, it doesn't matter if you have `` in the form. If you do have a submit button in the form you simply need to handle the `submit` event on the form instead and prevent the default action. Once again the [docs](http://api.jquery.com/submit/) come to the rescue on this :) – rfunduk Oct 23 '12 at 12:41

score 31 · Answer 2 · edited Jun 15 '11 at 11:02

31

There is a nice form plugin that allows you to send an HTML form asynchroniously.

$(document).ready(function() { 
    $('#myForm1').ajaxForm(); 
});

or

$("select").change(function(){
    $('#myForm1').ajaxSubmit();
});

to submit the form immediately

edited Jun 15 '11 at 11:02

raveren

17,799
12
70
83

answered Jan 08 '09 at 17:18

Darin Dimitrov

1,023,142
271
3,287
2,928

score 14 · Accepted Answer · answered May 03 '09 at 15:15

14

This is what ended up working.

$("select").change(function(){
    $.get("/page.html?" + $(this).parent("form").find(":input").serialize()); 
});

answered May 03 '09 at 15:15

Chris Bartow

14,873
11
43
46

this won't submit the value of the select though – Andrew Jan 09 '19 at 18:33

Submit form using AJAX and jQuery

3 Answers3

Linked

Related