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>