Submitting standard web forms with Ajax and JSON


Introduction

In this example I have used jQuery framework to implement Ajax form submission. The response will be returned in JSON, which is a data exchange format like XML. They can then parse JSON response and implement further functionality. In this case I am simply rendering the message returned inside the ID "message" (see the full response below) using jQuery's fadeIn() function and I'm hiding the form with jQuery's FadeOut() function.

Step 1.

First thing you need to do is to download the jQuery library, upload it to your site and link it to the page the form is on or link to the library using a link such as this one:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
        

Step 2.

You then need to append "&JSON=1" to the form's action URL and add an id to it which you will use in the Ajax script for submission and also for hiding. In this example the ID added to the form is id="contact_form".

 The action URL should look something like this:

<form name="catwebformform86886" method="post" onsubmit="return checkWholeForm86886(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=24646&amp;OID=2848118&amp;OTYPE=1&amp;EID=0&amp;CID=0&amp;JSON=1" id="contact_form">

Step 3.

You then need to find "theForm.submit();" inside the validation script below the web form and replace it with the name of your jQuery function. In this example jqsub(); was used to the function name.
The function will look like this:

<script type="text/javascript">
function jqsub() {

var $f = $('#contact_form');
var $m = $('#message');
$.ajax({
  type: 'POST',
  url: $f.attr('action') + '&amp;JSON=1',
  data: $f.serialize(),
    success: function(msg) {
    var formResponse = eval(msg); // This line evaluates the JSON data and converts it to JSON object. In older version of jQuery you will have to evaluate JSON object as a string.
        if (formResponse.FormProcessV2Response.success) {
                $m.addClass('success').fadeIn().html(formResponse.FormProcessV2Response.message);
                $f.fadeOut(); //Hide the form
        }
                    
    },
    error: function(msg) {
    alert('error'+msg);
    return false;
    }
});
}
</script>

The response from the server will look like this:

  {"FormProcessV2Response": { "success": true, "entityId": "2661179",
    "objectTypeId": "Cases", "objectId": "966085", "message": "
    <table class="\&quot;tabledefault\&quot;">
      <tbody><tr>
        <td id="\&quot;title\&quot;">
          <strong>Summary of web form submission:</strong><br />
          <!-- IP Address: 59.154.111.154 -->
        </td>
    </tr>
    <tr>
        <td id="\&quot;name\&quot;">
        <strong>Your Name</strong><br />
        Mario g
        </td>
    </tr>
    <tr>
        <td id="\&quot;email\&quot;">
        <strong>Email Address</strong><br />
        <a href="/&quot;mailto:mg@mg.com/&quot;">mg@mg.com</a>
        </td>
    </tr>
    <tr>
        <td id="\&quot;casenumber\&quot;">
        <strong>Case Number</strong><br />
        966085
        </td>
    </tr>
    <tr>
        <td id="\&quot;homephone\&quot;">
        <strong>Home Phone Number</strong><br />
        22222
        </td>
    </tr>
    <tr>
        <td id="\&quot;customfields\&quot;">
        <table class="\&quot;tabledefault\&quot;">
            <tbody>
                <tr>
                    <td id="\&quot;CAT_Custom_106570\&quot;">
                    <strong>Company</strong><br />
                    g
                    </td>
                </tr>
                <tr>
                    <td id="\&quot;CAT_Custom_106571\&quot;">
                    <strong>Postcode</strong><br />
                    2222
                    </td>
                </tr>
                <tr>
                    <td id="\&quot;CAT_Custom_106572\&quot;">
                    <strong>Please sign-up for our regular email newsletters by
                    choosing an area of interest:</strong><br />
                    Website Design/Development
                    </td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
</tbody>
</table>
" }}


You can test the submission with this form below:

Your web form was successfully submitted.

* Required






Phone
Email