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,
"EnableDefaultJSValidation": 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": "c9df517f-e598-434a-abfd-72bcd4010b66",
"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": 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
},
"ReCaptcha_Sitekey": "6Lf2cGcUAAAAABbL4aDrclASNZx9S3uaI9EvpvlI",
"Params": {
"type": "form",
"alias": "demo_ajax_example",
"layout": "",
"collectionvariable": "formData"
}
}