15 April 2009 ~ View Comments

My Love Of Jquery’s Form Plugin

Web Programing

The type of web programing I do often has a large database back-end with which requires user input and data return. In the olden days you just created an html form and then posted some input data to some cgi (say PHP script) and the script would speak with the database and return some html causing the browser to reload on post. Now, that we are a super cool web 2.0 world we do things differently. We make our friend javascript use Ajax to do the post for us. If you are anything like me you take one look at javascript and say “no thank you”. Most people hate the syntax of javascript, the confusion of the language, or the browser compatibility issues; when I say most people I am including me. This is where our friends at Jquery come to the rescue http://jquery.com (more on them in another post).

For now I want to highlight a jquery plugin, an additional library that grows the functionality of jquery. The Form Plugin (Hosted Here) allows jquery to submit form data via Ajax either when the user hits submit using the ajaxForm() or on demand using ajaxSubmit(). Here is an example of how I used it in a recent project.

index.php -

So from the above html code you can see there is no submit button. Our goal here is to make it so when you change anyone of the input form items it will collect the value of each field and post the data to returnGraph.php. The data will be posted via Ajax so there is no page refresh. We want Ajax to change the graph and put the graph in the div with id “graph-return”. We also want some sort of spinner to spin to show the user the browser is thinking and waiting for a graph to appear. We are going to put an animated gif in the graph div that will be replaced with the graph when it is returned from returnGraph.php.

The next step is the write some javascript. You need to make sure you have the jquery and form plug in included in your code.





Here is the Javascript I use to bind to the form to make the Ajax call and to also bind to the input items to make a post on change.

// This function will deal with Chart controls.
function setupControls()
{
// Setup Date Picker
$(“#date”).datepicker({
mandatory: true,
dateFormat: “M d, yy”,
showOn: “both”,
maxDate: “1″,
buttonImage: “../images/calendar.gif”,
buttonImageOnly: true,
onSelect: function (date) {
resubmitGraph();
}
});

// Setup a generic bind to bind all input fields to get a new graph
$(“#control-form :input”).change(resubmitGraph);
}

// This function will get the value of each control and submit an ajax form request to reder new
// graph.
function resubmitGraph()
{
$(“#control-form”).ajaxSubmit({
beforeSubmit: function () {
$(“#graph-return”).html(‘<div class=”loading1″ style=”margin: 20% 0 0 45%;”></div>’);
},
success: function (response) {
$(“#graph-return”).html(response);
}
});
}

I will not cover what datepicker is but it is part of the jquery ui plugin. I will cover this in a later post. Jquery UI

The function resubmitGraph() is where all the magic happens. It does something call seralize the form data. It goes through each input form field creates a php post string. Here is an example unrelated to my example. I got it from here Here

Now in the background the ajaxSubmit() function sends the serialized form Post to returnGraph.php. Also, just before posting we clear the “graph-return” div and put an automated gif in place to let the user know something is happening. Once the script is done processing the data it will call the “success” part ajaxSubmit() and pass in the response from the post. In our case it is a graph. The animated gif is replaced with the graph. Ajax Submit complete.

From the code below you can see we bind a change action to each input item in the form. So anytime anything changes in the fields we redraw the graph.

$(”#control-form :input”).change(resubmitGraph);

Tags: , , , , ,
    blog comments powered by Disqus