26
May
email Twitter

Posted in: jQuery

Dform a jQuery AJAX Form submission tool

Sometimes you would have a small form on the website, like a newsletter signup or a polling form, in which it is not a desired affect to direct the user to a different page when they have submitted the form.

For this purpose I have created this jQuery plugin that picks up the form and makes it submit via Ajax…


You can view a demo here.

You can download the source code here - jQueryForm 35(KB)

So what do you get in the ZIP:

  1. jquery-1.6.1.min.js – this is the regular jQuery library
  2. jQueryDform.js – the plugin
  3. trans.png - a trasnparant PNG for the form opacity effect
  4. formSubmit.php (optional) – the server side script for the form (in this case in PHP)
  5. index.html (optional) – an example HTML page
  6. main.css (optional) – the example CSS page

The three optional files are mainly for to the example especially the HTML and CSS ones – the server side file (formSubmit.php) can be anything that executes a server side script (be it PHP or ASP.NET) as long as the executed script returns “success” if the form validated and the script executed correctly…

Anything else returned from the script will be interpreted as error code and will be prompted as an error message.

Here is a bit of an explanation on how to implement this…

<form id="formDemo" action="formSubmit.php" method="post">
<table>
<tbody>
<tr>
<td valign="top">Name</td>
<td valign="top"><input id="Name" name="Name" type="text" /></td>
</tr>
<tr>
<td valign="top">Email</td>
<td valign="top"><input id="Email" name="Email" type="text" /></td>
</tr>
<tr>
<td valign="top">Message</td>
<td valign="top"><textarea id="Message" cols="40" rows="5" name="Message"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" /></td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jQueryDform.js"></script>
<script>
    jQuery(document).ready(function(){
        jQuery('#formDemo').jquerydform();
    });
</script>

After including the jQuery library and our special jQueryDform.js file, we initiate the ready function on jQuery and tell jQuery on which item to implement the Dform on (in this case #formDemo).

You will also notice that the form action submits to “formSubmit.php”, jQueryDform will pick this up and submit it via AJAX.

This has been tried and tested on IE9/8/7, FireFox 4, Google Chrome and it worked on all of them, you can change the styling and the jQueryDform.js file as much as you like – code is given as is…

Let me know how it worked out for you…

No Comments

Got something to say? Leave a comment