In this tutorial we will be using jQuery to post a form with ajax. Basically, that means we will be posting data captured in a form to another page to get processed, and we will be getting the result back without reloading the page. I have kept this tutorial very simple, as loads of the jQuery ajax tutorials out there have to much “fluff”. We are going to be making a form where a user can enter 2 numbers and click submit to get the result of the added numbers. We are keeping it so minimal, we not even putting in validation. Here we have the bare bones. Lets get it on!
First lets take a look at our html:
<input name="firstnumber" type="text" class="firstnumber" size="4"/> + <br />
<input name="secondnumber" type="text" class="secondnumber" size="4"/> = <br />
<div class="result"><input name="" type="text" class="temp" value="" size="4"/></div>
<input type="button" value="calculate" class="clicker" />
</form>
What we have there is a form, with 5 elements inside. There are two form textfields, one for each of our numbers to be added (firstnumber & secondnumber).
We then have a div with a class “result” is where our result is going to be called into from our ajax call. Inside the “result” div is a textfield called “temp” which is a temporary placeholder just to make our form look pretty before the user submits. Next we have the button to submit our form which has the class “clicker”
Lets start with our jQuery. First we create our jQuery ready block with a click event for the element clicker
$('.clicker').click(function(){
});
});
The first thing to do in our click event is to get the values of the textfields where the user will have entered there numbers (this is where our validation would go if we were putting it in) which looks like this:
var secondnumber = $('.secondnumber').val();
We are creating 2 variables, firstnumber & secondnumber , which use jQuery val() to get the value of the elements with the respective classes of “firstnumber” & “secondnumber”. Now we start our jQuery ajax call
type:"POST",
url: "ajaxpage.php",
cache:false,
data: "firstnumber="+firstnumber+"&secondnumber="+secondnumber,
success: function(data){
$(".result").empty();
$(".result").html(data);
}
});
return(false);
Lets have a look at what’s going on here. First, we call our ajax event ($.ajax({…), we then set the type to POST nad our URL to the path to our page that is processing our ajax request, which in this case in “ajaxpage.php”. You will see that cache is set to false. What this does is force the page you request not to be cached by the browser. We then set our data with standard name value pairs, so we are sending a variable called firstnumber with a value equal to or firstnumber variable we created from the value in the textfield, and of course the same for the second variable. That is all you need to post the data to the ajax page, now we want to use that data on our current page.
Its is a a simple case of firstly emptying the result div (removing our temporary holder) and returning the data in to that div with jQuerys html() function. Thats it. You will also notice there is a return(false) after our ajax call, this simply prevents the form from submitting (and refreshing our page).
That’s it for this tutorial, as always you can view the demo here and download the source here
