jQuery: How to Post a Form’s data with Ajax CodeUnit 11 FEB 2010

Ajax posts (or gets) using jQuery is a pretty simple affair, and so I’m not really going into that with this particular post.

Rather, I want to highlight just how easily one can post all of a form’s various values (housed in textboxes, text areas, selects or even radio buttons) to a specific jQuery ajax function call.

So let us examine the working  example below:

$.post('form_post_handler_script.php',$('#yourform').find(":input").serializeArray(),function (data, textStatus){
 alert(textStatus);
});

As you can see, we are using the nifty jQuery deprecated $.post() function to handle the actual POST push. The first parameter passed to it is the actual processing page the function needs to push the data to. The last parameter is simply the callback function, which is in this case doing nothing other than alerting the result of the ajax call). That leaves the interesting one, the actual data parameter that currently sits slap bang in the middle of that function call.

We can break down what is happening into three steps. Remember the $.post function expects data to be fed to it in the JSON format, which if you look around at examples on the web, is most often simply scripted by hand. However, this time around we’re going to let jQuery do the work for us!

The first part is the initial location of the form object, this time selected using its unique ID, in other words $(‘#yourform’) where yourform is the id of the form. Then we chain on a find(‘:input’) command that grabs all elements obeying the :input selector found within the initial object result. Finally, these are then converted to JSON format using the nifty serializeArray function, in other words completing the initial task of providing the post function with the data in the format it so craves.

And that’s it. Populating your ajax post push with your form’s values couldn’t get any simpler if it tried! :)

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.

  • Thank you,was able to implement.

  • Thank you,was able to implement.

  • Excellent, glad it worked for you! :)
    .-= Craig´s last blog ..Eyeshield 21 (Volume 4) =-.

  • Excellent, glad it worked for you! :)
    .-= Craig´s last blog ..Eyeshield 21 (Volume 4) =-.

  • Very useful thx :*
    I had a lot of forms that needed to be loaded on the fly (because of actualization of select fields and other stuff)
    I used this to create a generic form-container dialog capable of submitting any form that i put in it. (and very nicely reusable)
    $(“#formContainer”).dialog({
    buttons:{
    “send”:function(){
    $.post(“target.php”,$(“#formContainer>form input, formContainer>form select”)).serializeArray(),function(){
    $(“#formContainer”).dialog(“close”);
    });
    }
    }
    });
    of course in other parts of the code, the dialog must be fullfill with aa form and displayed.
    gracias.

  • Is it so important?, miss california sex tape discount [url=http://www.earthday.org/users/42884#1]miss california sex tape discount[/url], 146827,