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
– rfunduk, Commented Jan 10, 2009 at 19:02
Here is the way i post form data to action on server tryconcepts.blogspot.in/2012/02/… — yashpal
– yashpal, Commented Feb 29, 2012 at 13:45

rfunduk · Accepted Answer · 2009-01-08 17:28:17Z

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 8, 2009 at 17:28

rfunduk

30.5k5 gold badges61 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codepuppy Over a year ago

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.

rfunduk Over a year ago

Since this code handles submitting the form on change of a select box, it doesn't matter if you have <input type='submit' /> 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 come to the rescue on this :)

raveren · Accepted Answer · 2011-06-15 11:02:23Z

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, 2011 at 11:02

raveren

18.8k12 gold badges74 silver badges89 bronze badges

answered Jan 8, 2009 at 17:18

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Comments

Chris Bartow · Accepted Answer · 2009-05-03 15:15:59Z

14

This is what ended up working.

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

answered May 3, 2009 at 15:15

Chris Bartow

15.2k11 gold badges45 silver badges47 bronze badges

1 Comment

Andrew Over a year ago

this won't submit the value of the select though

Collectives™ on Stack Overflow

Submit form using AJAX and jQuery

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related