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.


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 :)

Next is a very simple form with a mixture of field types and validation requests (nothing fancy here). Also included at the bottom is the div which prints out the results to the browser.


As you can see the form trigger which calls the AJAX actions is set in the button using the onClick method. Also note I’ve added title=”required” to the ‘textOne’ field – this means the user will not be able to submit the form unless this field contains a value.

Finally here is a very stripped down Server script in PHP which takes the form values and returns them formatted back to the JS (you could do anything with the data at this stage!).



You could easily change the above to generate an email or add the form data to a database, the above example will echo out the results which are passed back to the div tag below the form.

There you have it, short and sweet (I hope) – I’ve intentionally kept the example scripts to a minumum but with still enough to be useful. Please feel free to take this and mess around with it.

Have Fun!!

6 Comments on AJAX generic form parser

  1. Glenn says:


    I have tried your script, but i get an error on page at the bottom of the browser. Maybe it is me being a newbee at AJAX, but could you please explain where the different parts of yhe code goes?

    regards Glenn

  2. krrish says:

    Thank you for your awesome contribution, this really helped me out alot….there isnt a single tutorial on web for Ajax that is any simpler or more useful then yours…

    I had to fix few errors on your javascript file before i could put this to any use. You did a great job on posting the form to any php file and also the few validations. I have enhanced it so you can display results where you want on a page…

    The new html tag to post the form would be:

    please check the new javascript file…..

    var req = createXMLHttpRequest();

    function createXMLHttpRequest() {
    var ua;
    if(window.XMLHttpRequest) {
    try {
    ua = new XMLHttpRequest();
    } catch(e) {
    ua = false;
    } else if(window.ActiveXObject) {
    try {
    ua = new ActiveXObject(“Microsoft.XMLHTTP”);
    } catch(e) {
    ua = false;
    return ua;

    var resultsPlace=”";

    function sendRequest(frm, file, place) {
    var rnd982g = Math.random();
    var str = “”;
    if(str) {
    req.open(‘GET’, file+’?'+str+’&rnd982g=’+rnd982g);
    resultsPlace = place;
    req.onreadystatechange = handleResponse;
    return false;

    function handleResponse() {
    if(req.readyState == 4){
    var response = req.responseText;
    document.getElementById(resultsPlace).innerHTML = response;

    function getForm(fobj) {
    var str = “”;
    var ft = “”;
    var fv = “”;
    var fn = “”;
    var els = “”;
    for(var i = 0;i

  3. cosminx says:

    Can you do a version for post method ?

  4. san koa says:

    Please give some example of how to use ajax within detail mention. thank you in advanced for all developer fusion.


  5. manisha says:

    hi ,

    i just want to know, wat is rnd982g?? and why its is being used here ?

  6. Jason says:

    Nice tutorial. Could you do one on cross-domain AJAX methods?