This is the second post of the Jquery plugin Selection series. If you didn’t read the others, take a look at this page.

Jquery for the one who don’t know it (probably not a lot), as described on its homepage, is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

So today, i’m going to write about the Jquery Form Plugin, that you can find on the malsup.com website. Well, the description from the plugin’s website is clear: The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!.

This is all you need to know! In a shorter version, you want to save a data from a form without reloading the page, then use Jform. How does it work:

1. Go on the the Jquery Form Plugin, download the file on the repository: http://jqueryjs.googlecode.com/svn/trunk/plugins/form/jquery.form.js

2. Add this line before your </head>:

<script src="jquery.form.js" type="text/javascript" charset="utf-8"></script>

3. Now add a simple form to your page. Nothing complicated:

<form id="myForm" action="comment.php" method="post">
    Name: <input name="name" type="text" />
    Comment: <textarea name="comment"></textarea>
    <input type="submit" value="Submit Comment" />
</form>

4.And finally our Jquery code:

<script type="text/javascript">
        $(document).ready(function() {
            $('#myForm').ajaxForm(function() {
                alert("Thank you for your comment!");
            });
        });
</script>

Time to explain the code. Like with all our jquery scripts, we start with $(document).ready(function() {. $(”#myform”).ajaxForm(); will apply the « ajaxForm » plugin on our form with the “#myform“ id. The alert() in our function allows us to display a message after submitting.*

You can use this plugin just like that. But here are some useful options. If you want to use them, modify your $(‘#myForm’).ajaxForm(function(){ …. }); to:

var options = { 
        target:        '#output1',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 

        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 

        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 

    $('#myForm').ajaxForm(options);

The beforeSubmit and succes options are useful to verify and validate the script, and then diplay data. The url option will be useful if you want to redirect your datas to another file when the javascript is enabled. The clearForm and resetForm options are clear. And one last thing, if you want to use some options of the $.ajax , you can.

There is a lot of others great plugin for forms. If you want more informations about them, just make a little search on the jquery plugin repository. I’m waiting for your comments !