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",
  "Fields": [
  {
    "Id": 191,
    "FormId": 11,
    "Name": "First Name",
    "Alias": "FirstName",
    "CreatedDateTime": "2019-06-12T23:29:52.97",
    "UpdatedDateTime": "2019-06-12T23:29:52.97",
    "Type": 7,
    "IsMandatory": false,
    "FieldGroupType": 0,
    "Options": [],
    "Order": 0
  },
  {
    "Id": 192,
    "FormId": 11,
    "Name": "Last Name",
    "Alias": "LastName",
    "CreatedDateTime": "2019-06-12T23:29:53.007",
    "UpdatedDateTime": "2019-06-12T23:29:53.007",
    "Type": 7,
    "IsMandatory": false,
    "FieldGroupType": 0,
    "Options": [],
    "Order": 1
  },
  {
    "Id": 193,
    "FormId": 11,
    "Name": "Email",
    "Alias": "Email",
    "CreatedDateTime": "2019-06-12T23:29:53.047",
    "UpdatedDateTime": "2019-06-12T23:29:53.047",
    "Type": 7,
    "IsMandatory": true,
    "FieldGroupType": 0,
    "Options": [],
    "Order": 2
  },
  {
    "Id": 194,
    "FormId": 11,
    "Name": "Not Required",
    "Alias": "NotRequired",
    "CreatedDateTime": "2019-06-12T23:29:53.08",
    "UpdatedDateTime": "2019-06-12T23:29:53.08",
    "Type": 7,
    "IsMandatory": false,
    "FieldGroupType": 1,
    "Options": [],
    "Order": 3
  },
  {
    "Id": 195,
    "FormId": 11,
    "Name": "reCAPTCHA v2",
    "Alias": "ReCAPTCHAV2",
    "CreatedDateTime": "2019-06-12T23:29:53.117",
    "UpdatedDateTime": "2019-06-12T23:29:53.117",
    "Type": 9,
    "IsMandatory": true,
    "FieldGroupType": 1,
    "Options": [],
    "Order": 4
  }
],
  "Parent": {
  "Id": 2227,
  "Url": "/demo-cs/ajax-form",
  "ParentId": 2224,
  "LastUpdatedDate": "2019-02-28T20:45:34",
  "Name": "AJAX Form",
  "UrlSlug": "ajax-form",
  "Enabled": true,
  "ReleaseDate": "2018-11-24T18:00:00",
  "ExpiryDate": "2099-12-10T18:00:00",
  "Weighting": 0,
  "Description": "{% component type: \"form\", alias: \"demo_ajax_example\", 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>",
  "ItemTags": "",
  "Author_Name": "",
  "Author_Url": "",
  "Author": "",
  "SEOTitle": "",
  "MetaTitle": "",
  "MetaDescription": "",
  "ShowPageForSearchEngine": true,
  "CanonicalLink": "",
  "EnableAMP": false,
  "AMPContent": "",
  "CodeEditor": true,
  "ExternalId": 0,
  "SocialMetaTags": "",
  "OpenGraphProperties": "",
  "DisableForSiteSearch": false,
  "SeoPriority": "",
  "CreatedByMemberId": 0,
  "ItemCategories": "",
  "ItemCategoryIdList": "",
  "SKUCode": "",
  "SiteSearchKeywords": "",
  "FtpFullPath": "Content\\Pages\\demo-cs\\ajax-form.html",
  "Module_ID": 1522,
  "Module_Alias": "Page",
  "ParentName": "demo-cs",
  "ParentUrl": "/demo-cs",
  "TemplateName": "DEMO Companion Site",
  "IsHome": false
},
  "Params": {
  "type": "form",
  "alias": "demo_ajax_example",
  "collectionVariable": "formData"
},
  "PaymentAmount": 0.0,
  "ModuleItemId": 0,
  "ModuleName": "",
  "FormType": "Generic",
  "UniqueId": "2aac0f65-ac37-491d-bad0-f1e79b1994ea",
  "IsSubscription": false
}