Wednesday, September 17, 2008

AJAX generic form parser

AJAX Generic Form Parser - With Validation:

In this tutorial I’ll show you a simple method to pass any HTML form through AJAX without the need to hard code all form fields into the JavaScript or Server Side Script. Using this simple piece of JavaScript you can reuse it as is with any form, saving a lot of time. I’ve even added basic validation to certain form element types (which would be expected).

Okay, straight to the main JS code. (readmore....)

The JavaScript code above is split into 4 functions, here is an overview of what each function does.

createXMLHttpRequest() - This is the function which will establish the AJAX connection object, this is called as soon as the JS file is loaded.

sendRequest() - This function is the one which is called when the form is submitted. This function requires (passed in) the ‘Form Object’ and the ‘File Name’ of the script which will receive the form data. When this function has been called, it takes the form object and passes it to the JS function getForm() which in turn parses the whole form extracting all the data. sendRequest() then takes the open AJAX connection and passes all the data to the PHP file form processing. Finally when the request from the PHP server script is returned, it writes out the reply to an element on the screen with the div ID ‘results’.

getForm() - This is the magic, this function reads through the whole form and extracts the field data before returning it back to sendRequest(). It handles radio, text, password, textarea, select and checkbox field types. It even looks for validation requests on text, password and textarea fields (which is enabled by using title=”required” in the form element).

Simple :)


From :

No comments: