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! :)