[jQuery] blockui with standard form submit (no ajax)
Just a quick question. I'm using blockui with standard form post no
ajax or anything. It works great, but Im just wondering is this
considered an ok think to do. Basically all I wanted to do was lock
the browser screen upon submitting the form and show a message. I
only ask because it seems a lot of blockui examples use an ajax
request. Also I simply added the block UI call within a standard
javascript validation routine if the statement is true.
$.blockUI( '<h1>Just a moment...</h1>' );
example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="blockui.js"></script>
<script type="text/javascript">
function CheckForm( theform )
{
var bMissingFields = false;
var strFields = "";
var strEmail = theform.SSL_EMAIL.value;
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if( theform.SSL_AMOUNT.value == '0.00' ){
bMissingFields = true;
strFields += " NO AMOUNT AVAILABLE! You must have a
payment amount to submit a payment.\n" + " \n";
}
if( theform.cc_card_type.value == '' ){
bMissingFields = true;
strFields += " Credit Card: The Card Type Mastercard
or Visa\n";
}
if( theform.SSL_CVV.value == '' ){
bMissingFields = true;
strFields += " Credit Card: Card Security Code\n";
}
if( theform.SSL_FIRST_NAME.value == '' ){
bMissingFields = true;
strFields += " Billing: First Name\n";
}
if( theform.SSL_LAST_NAME.value == '' ){
bMissingFields = true;
strFields += " Billing: Last Name\n";
}
if( theform.SSL_EMAIL.value == '' ){
bMissingFields = true;
strFields += " Billing: Email\n";
}
if (!strEmail.match(re)) {
bMissingFields = true;
strFields += " Billing: Please check your email
address!\n";
}
if( bMissingFields ) {
alert( "I'm sorry, but you must provide the following
field(s) before continuing:\n" + strFields );
return false;
}
validateCard(theform.SSL_CARD_NUMBER.value,theform.cc_card_type.value,theform.SSL_EXP_DATE.value);
return false;
}
/* validate credit card */
function mod10( cardNumber ) {
var ar = new Array( cardNumber.length );
var i = 0,sum = 0;
for( i = 0; i < cardNumber.length; ++i ) {
ar[i] = parseInt(cardNumber.charAt(i));
}
for( i = ar.length -2; i >= 0; i-=2 ) {
ar[i] *= 2;
if( ar[i] > 9 )
ar[i]-=9;
}
for( i = 0; i < ar.length; ++i ) {
sum += ar[i];
}
return (((sum%10)==0)?true:false);
}
function validateCard(cardNumber,cardType,cardMonth,cardYear) {
if( cardNumber.length == 0 ) {
alert("Please enter a valid card number.");
return false;
}
for( var i = 0; i < cardNumber.length; ++i ) {
var c = cardNumber.charAt(i);
if( c < '0' || c > '9' ) {
alert("Please enter a valid card number. Use only digits. do not
use spaces or hyphens.");
return false;
}
}
var length = cardNumber.length;
switch( cardType ) {
case 'a': if( length != 15 ) {
alert("Please enter a valid American Express Card number.");
return;
}
var prefix = parseInt( cardNumber.substring(0,2));
if( prefix != 34 && prefix != 37 ) {
alert("Please enter a valid American Express Card number.");
return;
}
break;
case 'd': if( length != 16 ) {
alert("Please enter a valid Discover Card number.");
return;
}
var prefix = parseInt( cardNumber.substring(0,4));
if( prefix != 6011 ) {
alert("Please enter a valid Discover Card number.");
return;
}
break;
case 'M': if( length != 16 ) {
alert("Please enter a valid MasterCard number.");
return;
}
var prefix = parseInt( cardNumber.substring(0,2));
if( prefix < 51 || prefix > 55) {
alert("Please enter a valid MasterCard Card number.");
return;
}
break;
case 'V': if( length != 16 && length != 13 ) {
alert("Please enter a valid Visa Card number.");
return;
}
var prefix = parseInt( cardNumber.substring(0,1));
if( prefix != 4 ) {
alert("Please enter a valid Visa Card number.");
return;
}
break;
}
if( !mod10( cardNumber ) ) {
alert("Sorry! this is not a valid credit card number.");
return false;
}
var sagree=confirm("Are you sure you want to submit this payment?
Click the OK button if wish to proceed and submit your payment.");
if(sagree)
{
$.blockUI( '<h1>Just a moment...</h1>' );
document.billpay.submit();
}
return sagree;
return true;
}
</script>
</head>
<body>
<form id="billpay" name="billpay" action="http://10.1.1.3"
method="post" onSubmit="return CheckForm(this)">
First Name:
<input type="text" id="SSL_FIRST_NAME" name="SSL_FIRST_NAME"
value="John"><br />
Last name:
<input type="text" id="SSL_LAST_NAME" name="SSL_LAST_NAME"
value="Doe"><br />
Email:
<input type="text" id="SSL_EMAIL" name="SSL_EMAIL"><br />
Payment Amount:
<input type="text" id="SSL_AMOUNT" name="SSL_AMOUNT"
value="20.00"><br />
Card Type:
<select id="cc_card_type" name="cc_card_type">
<option value="">Select Card</option>
<option value="M">MasterCard</option>
<option value="V" selected>Visa</option>
</select><br />
Credit Card Number:
<input type="text" id="SSL_CARD_NUMBER" name="SSL_CARD_NUMBER"
value="4029300020003003" maxlength="16" size="16"><br />
Expiration Date:
<input type="text" id="SSL_EXP_DATE" name="SSL_EXP_DATE" value="0508"
maxlength="4" size="4"><br />
Security Number:
<input type="text" id="SSL_CVV" name="SSL_CVV" value="1234"
maxlength="4" size="4"><br />
<input type="submit" value="Submit">
</form>
</body>
</html>