JQuery is a very flexible tool for managing form data. There is a plugin that allows JQuery to manage form data passing this data using AJAX.
This Javascript plugin can be downloaded free from: http://malsup.com/jquery/form/
I highly recommend reading the great posts over at http://api.jquery.com/jQuery.post/
Telling JQuery about your Form
In order for JQuery to process your form you need to tell it a few things first.
• What Form to work on
• How to validate the form
• Where to post the form data to
• What to do next (On success)
Example fig 1.1
var elms;
// Find form elements and add default actions
elms = document.getElementsByTagName('form');
for(i=0;i<elms.length;i++) {
var options = {
target: '#mainBlock',
beforeSubmit: this.validate,
success: this.processForm
// 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 code above will change the actions of a form called "myForm". When a visitor clicks the submit button the information within the form will be sent to the URL using AJAX. This data will be posted to the "action" URL stated on the form. This location can be overridden by changing the URL within the example above.
Validating
For this process to make any sense we need to do something with the data. The most common task is to validate input.
Before the data is sent off we are able to validate this information by passing the data over the validate JavaScript function. This allows us to process data in any way we see fit.
Note that validating form data is a large topic so we are going to be releasing a tutorial soon about this topic.
Processing
Once we have validated the information JQuery will send this data off and return any response sent to a function.
function(responseText, statusText)
The data is then sent to a function (in this case processForm) that will accept the response and the status of the requested post. At this point you can choose what to do with this data.
Going One Step Further
The problem with this process is the requirement to know the form name, URL and action to process and run JS code for each form. This may lead to duplicate Javascript code throughout your web application. Updating or bug-fixing could then pose a problem.
My solution is to automatically process every form and add AJAX capabilities to it. Adding the initial call of the JavaScript function to the body tag of the page will ensure that every form on the current page is processed.
Example fig 1.2
The following code will loop over every form element it finds and automatically add AJAX capabilities. Each from has a custom element called "redirect" that states if the AJAX rules should be applied to the given form, because sometime you really do require a POST/GET/REDIRECT.
Fig 1.3 shows what the form will look like.
init=function() {
// Get the Focus to the search tool
$('#frmSearch_value').focus();
var elms;
// Find form elements and add default actions
elms = document.getElementsByTagName('form');
for(i=0;i<elms.length;i++) {
var options = {
target: '#mainBlock', // target element(s) to be updated with server response
beforeSubmit: this.validate, // pre-submit callback
success: this.processForm // 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
};
// Check if the form refreshed the browser or uses ajax to load the data into the main block
if( elms[i].getAttribute("redirect") == "true" ) {
} else {
$('#' + elms[i].name).ajaxForm(options);
}
}
Example fig 1.3
The HTML example below shows two forms. When the page is loaded it will run the init() function. This will loop over all forms within the page. Once it finds a form it will check the "redirect" attribute to see if it should process the form and add AJAX capabilities.
By doing so you should be able to spot that " frmAddPage" will be redirected with a page refresh however, frmSearch will use AJAX to process the form. The response from the request will be place within the DIV element "mainBlock"
<html>
<body onLoad="init();">
<form action="/cms/addPage" method="POST" name="frmAddPage" id="frmAddPage" redirect="true">
<input type="text" name="pagename" id="pagename" value="">
<input type="Submit" value "Add Page">
</form>
<form action="/cms/search" method="POST" name=" frmSearch" id=" frmSearch" redirect="false">
<input type="text" name="find" id="find" value="">
<input type="Submit" value "Search">
</form>
<div id="mainblock"> </div>
</body>
</html>
