CA Trew
Blog Site of the TrewMan

This article will attempt to show how to take an existent form in html and to ajax the form, that is to bring up the form into a jQuery UI dialog box and then to send the data back to the target URL for processing. This article assumes you have some knowledge on how jQuery works and a little bit on the jQuery UI framework. If you need to learn about this first, then head over to www.jquery.com and www.jqueryui.com.

Warning, this article only covers the basics and assumes you have a simple form without validation. Obviously depending on what you are working on or want to achieve, you will need to modify whats below. So take this article just as a basis.

So to kick off lets assume you already have a form in its own file:

form.php

Name: 




Surname: 




Bio: 



Receive newsletter: 




Gender: 


Male
Female




Package: 

 Gold
 Silver
 Blue

Nothing to hectic about the file above. The form is set to POST mode and has a target action for processing of the data. I have included html elements such as radio boxes, a checkbox and a select dropdown list to show you that jQuery can collect all forms of form data.

Our target php script simply dumps the POST variables for now.

form-process.php

foreach($_POST as $key =--> $value)
{
	print("<p>{$key}: ");
	print_r($value);
	print("</p&ht;");
}

So now for the fun part. We want to write some Javascript code to dynamically load the html form and show it in a jQuery UI dialog box. Then we need to add buttons to grab the forms filled in data and to send them via ajax to our target script. For this article we will show the response, which is simply the output dump of the POST variables.

Firstly lets add a button. Simple stuff:

Fill out form

The our Javascript code

Explanation of the code above:

1: Starting our Javascript code. This is a basic feature of jQuery where we pass through a custom function to the jQuery core which will be executed once the page is fully loaded. Nothing fancy here.

2: Here we are dynamically added a click event to our button. This code will do everything we need to load a form via ajax, show it, collect the data, send the data to another script and then show the results.

3: We need to load the form via ajax. Since our form is sitting in its own file, we simple call an ajax get request on it. Once the html is returned we then show it in a dialog box. If you need more info on ajax methods in jQuery, head over to their website.

4: The line here simple creates a jQuery object that wraps around an html div element. We set the contents of the div to the form html that was returned from the GET ajax request.

5: Our dialog box will need some buttons. The buttons will be in an array where the key is the title of the button and the value is the click event of the button. Our first button is a Cancel button which simply closes the form. The submit buttons will be added dynamically for this tutorial.

6: If we leave the submit buttons of the form in the code, then they will appear in the dialog. The problem is that the user can still click on them which will submit our form, not via AJAX, but as normal. So what we want to do is remove the buttons from the html form and insert them into the button bar of the dialog box. We will just add them after our cancel button in step 5. So for each button in our html form, we will do steps 7 to 9 on them.

7: Find the form element in the code. With that grab the action attribute of the form. We are assuming for this tutorial that the form has the POST method. The action attribute tells the browser where to post the data when the user submits the form. We will use this target in the ajax POST request in step 9.

8: Now for the easy part. We will use a very nifty jQuery function to grab all the form data from the form and put it nicely in an array ready for sending down our ajax POST request. A problem we have in this example is that our form has two submit buttons, each with their own name. So depending on which one was used to submit the data (in a normal form, not ajax), there would be a different post variable with the name of the button that was clicked. To handle that in the ajax way, we simple push the name and value of the button onto our array returned by the jQuery function. Simple as that.

9: Now we are ready to send our data via ajax. Simple call the $.post method provided by jQuery. The first element is the target url, then the data, then the response function. Here we simple show the results in a dialog box so we can see that the data sent via ajax is the same as if we wont using ajax.

10: This line just removed the submit button from the code so the user will not click on it.

11: Show the modified form to the user in a jQuery dialog box.

And thats about it. Remember that this is only the basics as there is so much that goes into forms. Exceptionally when it comes to client side validation and confirmation before sending.