Add Preloader gif to form processing
<form id="homeform" method="post" action="http://popbetaserver.com/projects/pp/beta/otp_controller.php" onsubmit="return validateForm()">
<input type="hidden" name="action" value="process_otp">
<input type="hidden" name="CampaignCode" value="<?php echo $CampaignCode ; ?>">
<div class="col-md-6 col-sm-6 fname">
<input class="text" type="text" name="FirstName" placeholder="First Name*">
</div>
<div class="col-md-6 col-sm-6 lname">
<input type="text" class="text" name="LastName" placeholder="Last Name*">
</div>
<div class="col-md-6 col-sm-6 mobile">
<input type="tel" class="text" name="MobilePhone" id="mobile" placeholder="Mobile Phone*" maxlength="10"/>
</div>
<div class="col-md-6 col-sm-6 email">
<input type="text" class="text" name="Email" placeholder="Email*">
</div>
<div class="col-md-12">
<input class="submit" type="submit" value="Order Card">
</div>
<div class="col-md-7 col-sm-6">
<p>
<input type="checkbox" id="IsReceiveSms" name="IsReceiveSms" value="Enabled" checked="checked">
I approve receiving a verification code & messages via SMS<sup>1</sup></p>
</div>
<div class="col-md-5 col-sm-6" style="padding-top: 2px;">
<p>Items marked with * are mandatory.</p>
</div>
</form>
// #################### JS #######################
function validateForm() {
var fname = document.forms["homeform"]["FirstName"].value;
var lname = document.forms["homeform"]["LastName"].value;
var mobile = document.forms["homeform"]["MobilePhone"].value;
var email = document.forms["homeform"]["Email"].value;
var checkedbox = document.getElementById('IsReceiveSms');
if (fname == null || fname == "") {
sweetAlert("Oops...", "We need your first name to verify your identity.", "error");
return false;
}
else if (lname == null || lname == "") {
sweetAlert("Oops!", "We need your last name to verify your identity.", "error");
return false;
}
// EMPTY MOBILE NUMBER
else if (mobile == null || mobile == "" ) {
sweetAlert("Oops!", "We need your phone number to verify your identity.", "error");
return false;
}
// INVALID MOBILE NUMBER
else if ( validareacode(mobile) == false ) {
sweetAlert("Invalid Entry!", "The number you entered is invalid. Please check the number and try again. If the problem persists, please contact our Concierge at 844-476-2786.", "error");
return false;
}
else if (email == null || email == "" || validateEmail(email) == false ) {
sweetAlert("Oops!", "Please enter a valid email address.", "error");
return false;
}
else if ( validatecheckbox(checkedbox) == false ) {
sweetAlert("Oops!", "Please check this box to continue so we can send you a verification code and important updates about your account.", "error");
return false;
}
// SHOW PRELOADER WHILE THE PAGE LOADS
else {
$("#overlay, #PleaseWait").show();
return true;
}
} // END function validate Form
$(document).ready(function() {
// body here is the main container, for modal forms change 'body' (both) to 'your_selector'
$("body").prepend('<div id="overlay" class="ui-widget-overlay" style="background:black;opacity:.55;width;height:100%;width:100%;position:absolute;z-index:10000;text-align:center;vertical-align:middle;display:none;"></div>');
$("body").prepend("<div id='PleaseWait' style='display:none'><img src='http://popbetaserver.com/projects/pp/beta/wp-content/themes/pop/images/spinner.gif' style='width:100px;height:100px;z-index:100000;position:absolute;left:50%;margin-left:-50px;top:50%;margin-top:-50px;' /></div>");
});