Ajax, jQuery, and Form Submission

December 28, 2011
AJAX, Developers
LinkedInTwitterFacebookEmail

If you’ve ever seen one of those silent form submissions, where the user submits and form and then receives a confirmation back without reloading the page, you know how awesome they are. But here’s the great thing: it only takes a few lines of code to make this happen!

Step 1 – Link to jQuery

Add the jQuery library to your page using a Javascript script source (copy and paste in the <head> area):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Step 2 – jQuery & Ajax

Add the following jQuery coding to the head section of your page (copy & paste):

<script language="javascript">
 $(document).ready(function() {
 $("#button2").click(function() {
 var name = $("#name").val();
 var dataString = 'name='+ name;
 //alert (dataString);return false; //uncomment this line to check if items are passing
 $.ajax({
 type: "POST",
 url: "PHPpageThatWillProcessForm.php",
 data: dataString,
 success: function() {
 $('#emailingForm').html("<div id='message'></div>");
 $('#message').html("<span class="h2">Thank you!</span>")  ;
 }
 });
 return false;
 });
 });
 </script>

Here’s what’s going on:
A $ sign always starts in jQuery. A # sign designates something’s ID (a CSS Div, an image ID, anything’s ID). A . (period) designates something’s class (same as CSS really).
In jQuery, we always have to check if the document is ready (document.ready) before we do anything. If you look at the ‘({‘ here, you’ll find a matching pair at the very end of the script ‘})’. As in all coding, all open brackets must be closed for the code to run. Next, we take a button ID (button2, to be exactly) and tell jQuery to do a function when it is clicked.

Then we start the good stuff. We take the value of a form input box (‘#name’) and put it into the variable ‘name’. Then we create another variable called ‘dataString’ and create a string of information. This information will be added to the end of the PHP page we are loading and we’ll use the PHP ‘$_GET’ to retrieve it. You can add as many variables there as you want, there isn’t a limit (as far as I know!).

The ‘//alert’ line is just to make sure everything is working. if you uncomment that line, it will confirm that everything is connecting the way it should.

Finally, the Ajax. The type is POST (like most forms). Type in the URL that will be processing the form (what page will send the form, etc.). Then we add the data, referencing the variable dataString that we filled earlier with other variables. Finally, if the PHP on the other page succeeds, then we give the user feedback. I changed the div #emailingForm to contain another div, and then I added html to the second div. That way it erases the form after submitting.

Don’t forget to add the ‘return false’ at the end! If you don’t, Your page will reload.

Step 3 – The Form

Adding the form to the page is pretty straightforward. Add a normal form, like below:

<form action="" method="" name="Form2" id="Form2">
 <div class="names"><h2>Name:</h2> </div>
 <div class="inputs"><input name="name" type="text" style="width:160px;" id="name"/></div><br />
 <input name="button" id="button2" type="submit" value="Submit" style="margin-top:40px;width:75px;height:30px;"/>
 </form>

The most important things to remember to change: The ID of the button to submit (here it is button2), and the id of each of the inputs (here only one – name).

That’s it, folks!

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>