Basic AJAX Form Submission Demo

NOTE: This script assumes jQuery is being loaded on your site.

<form id="myForm" action="/forms/cases.ashx?form=demo_ajax_example&jsonResponse=1" onsubmit="onMyFormSubmit(); return false;" method="post" enctype="multipart/form-data">
	<label for="FirstName">First Name*</label>
	<input type="text" id="FirstName" name="FirstName">
	<label for="LastName">Last Name*</label>
	<input type="text" id="LastName" name="LastName">
	<label for="Email">Email*</label>
	<input type="text" id="Email" name="Email">
	<label for="NotRequired">Not Required</label>
	<input type="text" id="NotRequired" name="NotRequired">
	<label for="ReCAPTCHAV2">reCAPTCHA v2*</label>
	<div class="g-recaptcha" data-sitekey="6Lf2cGcUAAAAABbL4aDrclASNZx9S3uaI9EvpvlI"></div>
	<input class="button" type="submit" value="Submit">
</form>
	<div id="msgResponse"></div>


<script>
function onMyFormSubmit() 
{
    var $f = $('#myForm');
    var $r = $('#msgResponse');
    var gr = grecaptcha.getResponse();
     
    if(gr.length == 0)
    {
        $r.css('color', 'red').html('reCaptcha not valid');
        grecaptcha.reset();
    }
    else
    {
        if($f.data("sent"))
        {
            $r.css('color', 'red').html("Form submission is already in process.");
        }
        else
        {
            $f.data("sent", true);
            $.ajax(
            {
                type: 'POST',
                dataType : "json",
                url: $f.attr('action'),
                data: $f.serialize(),
                success: function(msg) 
                {
                    var formResponse = msg;
                    console.log(msg);
                    if (formResponse.Error == 0) 
                    {
                        var msg = "";
                        for(var i=0;i<formResponse.Fields.All.length;i++)
                        {
                            msg += formResponse.Fields.All[i].Name + ': ' + formResponse.Fields.All[i].Value + '<br>';
                        }
                        $f.fadeOut(300);
                        $r.css('color', 'green').fadeIn(500).html('<h4>Thank you!</h4><p>' + msg + '</p>');
                    }
                    else
                    {
                        var msg = "";
                        for(var i=0;i<formResponse.ErrorMessages.length;i++)
                        {
                            msg += formResponse.ErrorMessages[i] + "<br>";
                        }
                        $r.css('color', 'red').fadeIn(500).html(msg);
                        grecaptcha.reset();
                        $f.data("sent", false);
                    }                        
                },
                error: function(msg) 
                {
                    $r.css('color', 'red').fadeIn(500).html('error'+msg);
                    $f.data("sent", false);
                    return false;
                }
            });
        }
    }
}
</script>
{
  "Name": "DEMO AJAX Example",
  "Alias": "demo_ajax_example",
  "IsSubscription": false,
  "Fields": [
    {
      "Name": "Email",
      "Alias": "Email",
      "CreatedDateTime": "2021-06-28T18:03:40.451603",
      "UpdateDateTime": "0001-01-01T00:00:00",
      "Type": 7,
      "IsMandatory": true,
      "FieldGroupType": 1,
      "Order": 2,
      "Options": [],
      "Id": "1396",
      "FormId": "1383"
    },
    {
      "Name": "reCAPTCHA v2",
      "Alias": "ReCAPTCHAV2",
      "CreatedDateTime": "2021-06-28T18:03:40.45161",
      "UpdateDateTime": "0001-01-01T00:00:00",
      "Type": 9,
      "IsMandatory": true,
      "FieldGroupType": 2,
      "Order": 4,
      "Options": [],
      "Id": "1404",
      "FormId": "1383"
    },
    {
      "Name": "First Name",
      "Alias": "FirstName",
      "CreatedDateTime": "2021-06-28T18:03:40.451602",
      "UpdateDateTime": "2022-05-11T15:32:06.413082",
      "Type": 7,
      "IsMandatory": false,
      "FieldGroupType": 1,
      "Order": 0,
      "Options": [],
      "Id": "1394",
      "FormId": "1383"
    },
    {
      "Name": "Last Name",
      "Alias": "LastName",
      "CreatedDateTime": "2021-06-28T18:03:40.451602",
      "UpdateDateTime": "2022-05-11T15:32:06.413082",
      "Type": 7,
      "IsMandatory": false,
      "FieldGroupType": 1,
      "Order": 1,
      "Options": [],
      "Id": "1395",
      "FormId": "1383"
    },
    {
      "Name": "Not Required",
      "Alias": "NotRequired",
      "CreatedDateTime": "2021-06-28T18:03:40.451604",
      "UpdateDateTime": "2022-05-11T15:32:06.413082",
      "Type": 7,
      "IsMandatory": false,
      "FieldGroupType": 2,
      "Order": 3,
      "Options": [],
      "Id": "1397",
      "FormId": "1383"
    }
  ],
  "PaymentAmount": 0.0,
  "ModuleItemId": 0,
  "FormType": "Generic",
  "ModuleName": "",
  "UniqueId": "e20b214c-b194-4f28-b4dc-99bffca8a292",
  "Parent": {
    "Value": {
      "Id": 2227,
      "ModuleLayoutName": "Page Detail",
      "Enabled": true,
      "ReleaseDate": "2018-11-24T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "Weighting": 0,
      "Item_Rating": 0,
      "CodeEditor": true,
      "ExternalId": 0,
      "DisableForSiteSearch": false,
      "Author_Name": null,
      "Author_Url": null,
      "Author": 0,
      "SEOTitle": null,
      "CustomProperties": "{}",
      "LastUpdatedDate": "2021-07-13T01:06:04.346349",
      "Module_Alias": "Page",
      "Module_Id": 1522,
      "ParentName": "demo-cs",
      "ParentUrl": "/demo-cs",
      "Name": "AJAX Form",
      "UrlSlug": "ajax-form",
      "Url": "/demo-cs/ajax-form",
      "MetaDescription": null,
      "ShowPageForSearchEngine": true,
      "CanonicalLink": null,
      "MetaTitle": null,
      "ParentId": 2224,
      "Url_List": [
        "/demo-cs/ajax-form"
      ],
      "ParentId_List": [
        2224
      ],
      "EnableAMP": false,
      "AMPContent": null,
      "SocialMetaTags": null,
      "OpenGraphPropertiesValue": null,
      "SeoPriority": 0.5,
      "Description": "{% component type: \"form\", alias: \"demo_ajax_example\", layout: \"\", collectionVariable: \"formData\" %}\r\n\r\n\r\n<h1>Basic AJAX Form Submission Demo</h1>\r\n<div class=\"grid-x grid-padding-x\">\r\n    <div class=\"cell medium-6\">\r\n        <p>{% component type: \"form\", alias: \"demo_ajax_example\" %}</p>\r\n    </div>\r\n    <div class=\"cell medium-6\">\r\n        <ul class=\"tabs\" data-tabs id=\"code-tabs\">\r\n            <li class=\"tabs-title is-active\"><a href=\"#panel1\" aria-selected=\"true\">Form Code</a></li>\r\n            <li class=\"tabs-title\"><a data-tabs-target=\"panel2\" href=\"#panel2\">Liquid Output</a></li>\r\n        </ul>\r\n        <div class=\"tabs-content\" data-tabs-content=\"code-tabs\">\r\n            <div class=\"tabs-panel is-active\" id=\"panel1\">\r\n                <p class=\"callout warning\">NOTE: This script assumes jQuery is being loaded on your site.</p>\r\n                <pre>{% component type: \&quot;form\&quot;, alias: \&quot;demo_ajax_example\&quot; %}</pre>\r\n            </div>\r\n            <div class=\"tabs-panel\" id=\"panel2\">\r\n                <pre>{
  "Name": "DEMO AJAX Example",
  "Alias": "demo_ajax_example",
  "IsSubscription": false,
  "Fields": [
    {
      "Name": "Email",
      "Alias": "Email",
      "CreatedDateTime": "2021-06-28T18:03:40.451603",
      "UpdateDateTime": "0001-01-01T00:00:00",
      "Type": 7,
      "IsMandatory": true,
      "FieldGroupType": 1,
      "Order": 2,
      "Options": [],
      "Id": "1396",
      "FormId": "1383"
    },
    {
      "Name": "reCAPTCHA v2",
      "Alias": "ReCAPTCHAV2",
      "CreatedDateTime": "2021-06-28T18:03:40.45161",
      "UpdateDateTime": "0001-01-01T00:00:00",
      "Type": 9,
      "IsMandatory": true,
      "FieldGroupType": 2,
      "Order": 4,
      "Options": [],
      "Id": "1404",
      "FormId": "1383"
    },
    {
      "Name": "First Name",
      "Alias": "FirstName",
      "CreatedDateTime": "2021-06-28T18:03:40.451602",
      "UpdateDateTime": "2022-05-11T15:32:06.413082",
      "Type": 7,
      "IsMandatory": false,
      "FieldGroupType": 1,
      "Order": 0,
      "Options": [],
      "Id": "1394",
      "FormId": "1383"
    },
    {
      "Name": "Last Name",
      "Alias": "LastName",
      "CreatedDateTime": "2021-06-28T18:03:40.451602",
      "UpdateDateTime": "2022-05-11T15:32:06.413082",
      "Type": 7,
      "IsMandatory": false,
      "FieldGroupType": 1,
      "Order": 1,
      "Options": [],
      "Id": "1395",
      "FormId": "1383"
    },
    {
      "Name": "Not Required",
      "Alias": "NotRequired",
      "CreatedDateTime": "2021-06-28T18:03:40.451604",
      "UpdateDateTime": "2022-05-11T15:32:06.413082",
      "Type": 7,
      "IsMandatory": false,
      "FieldGroupType": 2,
      "Order": 3,
      "Options": [],
      "Id": "1397",
      "FormId": "1383"
    }
  ],
  "PaymentAmount": 0.0,
  "ModuleItemId": 0,
  "FormType": "Generic",
  "ModuleName": "",
  "UniqueId": "e1bf201d-567d-4d9c-b19d-27eccdf228c5",
  "Parent": {
    "Value": {
      "Id": 2227,
      "ModuleLayoutName": "Page Detail",
      "Enabled": true,
      "ReleaseDate": "2018-11-24T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "Weighting": 0,
      "Item_Rating": 0,
      "CodeEditor": true,
      "ExternalId": 0,
      "DisableForSiteSearch": false,
      "Author_Name": null,
      "Author_Url": null,
      "Author": 0,
      "SEOTitle": null,
      "CustomProperties": "{}",
      "LastUpdatedDate": "2021-07-13T01:06:04.346349",
      "Module_Alias": "Page",
      "Module_Id": 1522,
      "ParentName": "demo-cs",
      "ParentUrl": "/demo-cs",
      "Name": "AJAX Form",
      "UrlSlug": "ajax-form",
      "Url": "/demo-cs/ajax-form",
      "MetaDescription": null,
      "ShowPageForSearchEngine": true,
      "CanonicalLink": null,
      "MetaTitle": null,
      "ParentId": 2224,
      "Url_List": [
        "/demo-cs/ajax-form"
      ],
      "ParentId_List": [
        2224
      ],
      "EnableAMP": false,
      "AMPContent": null,
      "SocialMetaTags": null,
      "OpenGraphPropertiesValue": null,
      "SeoPriority": 0.5,
      "Description": "{% component type: \"form\", alias: \"demo_ajax_example\", layout: \"\", collectionVariable: \"formData\" %}\r\n{% capture form %}{% component type: \"form\", alias: \"demo_ajax_example\" %}{% endcapture %}\r\n\r\n<h1>Basic AJAX Form Submission Demo</h1>\r\n<div class=\"grid-x grid-padding-x\">\r\n    <div class=\"cell medium-6\">\r\n        <p>{{form}}</p>\r\n    </div>\r\n    <div class=\"cell medium-6\">\r\n        <ul class=\"tabs\" data-tabs id=\"code-tabs\">\r\n            <li class=\"tabs-title is-active\"><a href=\"#panel1\" aria-selected=\"true\">Form Code</a></li>\r\n            <li class=\"tabs-title\"><a data-tabs-target=\"panel2\" href=\"#panel2\">Liquid Output</a></li>\r\n        </ul>\r\n        <div class=\"tabs-content\" data-tabs-content=\"code-tabs\">\r\n            <div class=\"tabs-panel is-active\" id=\"panel1\">\r\n                <p class=\"callout warning\">NOTE: This script assumes jQuery is being loaded on your site.</p>\r\n                <pre>{{form | escape}}</pre>\r\n            </div>\r\n            <div class=\"tabs-panel\" id=\"panel2\">\r\n                <pre>{{formData | escape }}</pre>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
      "TemplateName": "DEMO Companion Site",
      "ItemCategories": null,
      "ItemCategoryIdList": null,
      "ItemTags": null,
      "SiteSearchKeywords": null,
      "ID": 2227,
      "CreatedByMemberId": "0",
      "IsHome": false,
      "Pagination": {
        "CurrentPage": 1,
        "ItemsPerPage": 1,
        "NumberOfPages": 16,
        "TotalItemsCount": 16
      },
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "Parent": {
        "Value": {
          "Id": 2224,
          "ModuleLayoutName": "Folder Detail",
          "Enabled": true,
          "ReleaseDate": "2018-11-24T18:00:00",
          "ExpiryDate": "2099-12-11T07:00:00",
          "Weighting": 0,
          "Item_Rating": 0,
          "CodeEditor": false,
          "ExternalId": 0,
          "DisableForSiteSearch": false,
          "Author_Name": null,
          "Author_Url": null,
          "Author": 0,
          "SEOTitle": null,
          "CustomProperties": "{}",
          "LastUpdatedDate": "2021-06-30T12:47:34.794759",
          "Module_Alias": "PageFolder",
          "Module_Id": 1516,
          "ParentName": null,
          "ParentUrl": null,
          "Name": "demo-cs",
          "UrlSlug": "demo-cs",
          "Url": "/demo-cs",
          "MetaDescription": null,
          "ShowPageForSearchEngine": false,
          "CanonicalLink": null,
          "MetaTitle": null,
          "ParentId": 1516,
          "Url_List": [
            "/demo-cs"
          ],
          "ParentId_List": [
            -1
          ],
          "EnableAMP": false,
          "AMPContent": null,
          "SocialMetaTags": null,
          "OpenGraphPropertiesValue": null,
          "SeoPriority": 0.5,
          "Description": null,
          "TemplateName": "DEMO Companion Site",
          "ItemCategories": null,
          "ItemCategoryIdList": null,
          "ItemTags": null,
          "SiteSearchKeywords": null,
          "ID": 2224,
          "CreatedByMemberId": "0",
          "IsHome": false,
          "Pagination": null,
          "OpenGraphProperties": {
            "title": null,
            "type": null,
            "url": null,
            "locale": null,
            "image": null
          },
          "Parent": null,
          "TemplateVirtualPointer": {
            "Pointer": 8491950041332711514,
            "TypeId": 1977186194,
            "InstanceId": 90,
            "DbTypeId": 1977186194,
            "DbInstanceId": 90
          },
          "Params": {}
        },
        "Type": 5
      },
      "TemplateVirtualPointer": {
        "Pointer": 8491950041332711514,
        "TypeId": 1977186194,
        "InstanceId": 90,
        "DbTypeId": 1977186194,
        "DbInstanceId": 90
      },
      "Params": {}
    },
    "Type": 5
  },
  "ReCaptcha_Sitekey": "6Lf2cGcUAAAAABbL4aDrclASNZx9S3uaI9EvpvlI",
  "Params": {
    "type": "form",
    "alias": "demo_ajax_example",
    "layout": "",
    "collectionvariable": "formData"
  }
}</pre>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
      "TemplateName": "DEMO Companion Site",
      "ItemCategories": null,
      "ItemCategoryIdList": null,
      "ItemTags": null,
      "SiteSearchKeywords": null,
      "ID": 2227,
      "CreatedByMemberId": "0",
      "IsHome": false,
      "Pagination": {
        "CurrentPage": 1,
        "ItemsPerPage": 1,
        "NumberOfPages": 16,
        "TotalItemsCount": 16
      },
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "Parent": {
        "Value": {
          "Id": 2224,
          "ModuleLayoutName": "Folder Detail",
          "Enabled": true,
          "ReleaseDate": "2018-11-24T18:00:00",
          "ExpiryDate": "2099-12-11T07:00:00",
          "Weighting": 0,
          "Item_Rating": 0,
          "CodeEditor": false,
          "ExternalId": 0,
          "DisableForSiteSearch": false,
          "Author_Name": null,
          "Author_Url": null,
          "Author": 0,
          "SEOTitle": null,
          "CustomProperties": "{}",
          "LastUpdatedDate": "2021-06-30T12:47:34.794759",
          "Module_Alias": "PageFolder",
          "Module_Id": 1516,
          "ParentName": null,
          "ParentUrl": null,
          "Name": "demo-cs",
          "UrlSlug": "demo-cs",
          "Url": "/demo-cs",
          "MetaDescription": null,
          "ShowPageForSearchEngine": false,
          "CanonicalLink": null,
          "MetaTitle": null,
          "ParentId": 1516,
          "Url_List": [
            "/demo-cs"
          ],
          "ParentId_List": [
            -1
          ],
          "EnableAMP": false,
          "AMPContent": null,
          "SocialMetaTags": null,
          "OpenGraphPropertiesValue": null,
          "SeoPriority": 0.5,
          "Description": null,
          "TemplateName": "DEMO Companion Site",
          "ItemCategories": null,
          "ItemCategoryIdList": null,
          "ItemTags": null,
          "SiteSearchKeywords": null,
          "ID": 2224,
          "CreatedByMemberId": "0",
          "IsHome": false,
          "Pagination": null,
          "OpenGraphProperties": {
            "title": null,
            "type": null,
            "url": null,
            "locale": null,
            "image": null
          },
          "Parent": null,
          "TemplateVirtualPointer": {
            "Pointer": 8491950041332711514,
            "TypeId": 1977186194,
            "InstanceId": 90,
            "DbTypeId": 1977186194,
            "DbInstanceId": 90
          },
          "Params": {}
        },
        "Type": 5
      },
      "TemplateVirtualPointer": {
        "Pointer": 8491950041332711514,
        "TypeId": 1977186194,
        "InstanceId": 90,
        "DbTypeId": 1977186194,
        "DbInstanceId": 90
      },
      "Params": {}
    },
    "Type": 5
  },
  "ReCaptcha_Sitekey": "6Lf2cGcUAAAAABbL4aDrclASNZx9S3uaI9EvpvlI",
  "Params": {
    "type": "form",
    "alias": "demo_ajax_example",
    "layout": "",
    "collectionvariable": "formData"
  }
}