jcadima
8/3/2015 - 4:24 PM

Add Preloader gif to form processing

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>");
});