disable submit after form validation

Hi experts - I have the following code however it doesnt disable submit button after validation. The validation works fine, I just need to disable the submit or even change cursor so they dont make multiple orders with multiple clicking of submit. Let me know your suggestions. See form submit button code i'm using below JS validation.

function CheckCardNumber(form) {
var tmpyear;
if (form.fName.value.length == 0) {
alert("Please enter your first name as it appears on your card.");
form.fName.focus();
return false;
}
if (form.lName.value.length == 0) {
alert("Please enter your last name as it appears on your card.");
form.lName.focus();
return false;
}
if (form.CardType.value.length == 0) {
alert("Please enter a Card Type.");
form.CardType.focus();
return false;
}
if (form.CardNumber.value.length == 0) {
alert("Please enter a Card Number.");
form.CardNumber.focus();
return false;
}
if (form.ExpYear.value.length == 0) {
alert("Please enter the Expiration Year.");
form.ExpYear.focus();
return false;
}
if (form.ExpYear.value > 96)
tmpyear = "19" + form.ExpYear.value;
else if (form.ExpYear.value < 21)
tmpyear = "20" + form.ExpYear.value;
else {
alert("The Expiration Year is not valid.");
return false;
}
tmpmonth = form.ExpMon.options[form.ExpMon.selectedIndex].value;
// The following line doesn't work in IE3, you need to change it
// to something like "(new CardType())...".
// if (!CardType().isExpiryDate(tmpyear, tmpmonth)) {
if (!(new CardType()).isExpiryDate(tmpyear, tmpmonth)) {
alert("This card has already expired.");
return false;
}
if (form.cvv2Number.value.length == 0) {
alert("Please enter your credit card verification code.");
form.cvv2Number.focus();
return false;
}
if(!isNum(form.cvv2Number.value)) {
alert("Please enter your credit card verification code.");
form.cvv2Number.focus();
return false;
}
if(form.CardType.selectedIndex==3) { //American Express
   if(form.cvv2Number.value.length!=4) {
      alert("Please enter your 4 digit credit card verification code.");
      form.cvv2Number.focus();
      return false;
   }
}
else {
   if(form.cvv2Number.value.length!=3) {
      alert("Please enter your 3 digit credit card verification code.");
      form.cvv2Number.focus();
      return false;
   }
}
card = form.CardType.options[form.CardType.selectedIndex].value;
var retval = eval(card + ".checkCardNumber(\"" + form.CardNumber.value +
"\", " + tmpyear + ", " + tmpmonth + ");");
cardname = "";
if (retval) {
// comment this out if used on an order form
//alert("This card number appears to be valid.");
return true;
}
else {
// The cardnumber has the valid luhn checksum, but we want to know which
// cardtype it belongs to.
for (var n = 0; n < Cards.size; n++) {
if (Cards[n].checkCardNumber(form.CardNumber.value, tmpyear, tmpmonth)) {
cardname = Cards[n].getCardType();
break;
   }
}
if (cardname.length > 0) {
alert("This looks like a " + cardname + " number, not a " + card + " number.");
return false;
}
else {
alert("This card number is not valid.");
return false;
      }
   }
}

MY FORM SUBMIT BELOW

<form name="ThisForm" onSubmit="return CheckCardNumber(this);" action="#" method="POST">

(form fields here)

 <input type="submit" value="Submit" onclick="if (CheckCardNumber(this.form)) { this.disabled=true; } else { return false; } ">
WebGirlCrissyAsked:
Who is Participating?
 
dj_alikConnect With a Mentor Commented:
disable before  check and enable after
0
 
dj_alikCommented:
JavaScript: Preventing Double Form Submission
http://www.the-art-of-web.com/javascript/doublesubmit/#.UP2GeSPQmUk
0
 
WebGirlCrissyAuthor Commented:
thanks! however... I must be missing something here; Validation is working but still the disable is not. I've updated my validation code as follows:

(just copied here the last of the error checking here where i've added add'l code...)

if (cardname.length > 0) {
alert("This looks like a " + cardname + " number, not a " + card + " number.");
return false;
}
else {
alert("This card number is not valid.");
return false;
      }
        form.submitButton.disabled = true;
    form.submitButton.value = "Please wait...";
    return true;

   }
   
}


AND FORM SUBMIT:
<input type="submit" value="Submit" name="submitButton" >
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
dj_alikCommented:
as i see you added the disable code after returns statements and it will be never executed
i mean if and else will exit from function.
0
 
WebGirlCrissyAuthor Commented:
So how would I get around this?
0
 
WebGirlCrissyAuthor Commented:
ahhhh yes.. okay trying that!
0
 
dj_alikCommented:
debug the javascript if you want to see what happened.
keep it simple and start with simple if else single check...
0
 
WebGirlCrissyAuthor Commented:
okay, first of all thank you for your patience - I'm not proficient in JS but certainly making some progress here.  Could you please review my code and let me know where I should be placing the code so this works after validation checks.  This currently works below if NO errors are triggered / prompted; if user makes an error and then it 're-validates' the button doesn't disable.
?

function CheckCardNumber(form) {
var tmpyear;
if (form.fName.value.length == 0) {
alert("Please enter your first name as it appears on your card.");
form.fName.focus();
return false;
}
if (form.lName.value.length == 0) {
alert("Please enter your last name as it appears on your card.");
form.lName.focus();
return false;
}
if (form.CardType.value.length == 0) {
alert("Please enter a Card Type.");
form.CardType.focus();
return false;
}
if (form.CardNumber.value.length == 0) {
alert("Please enter a Card Number.");
form.CardNumber.focus();
return false;
}
if (form.ExpYear.value.length == 0) {
alert("Please enter the Expiration Year.");
form.ExpYear.focus();
return false;
}
if (form.ExpYear.value > 96)
tmpyear = "19" + form.ExpYear.value;
else if (form.ExpYear.value < 21)
tmpyear = "20" + form.ExpYear.value;
else {
alert("The Expiration Year is not valid.");
return false;
}
tmpmonth = form.ExpMon.options[form.ExpMon.selectedIndex].value;
// The following line doesn't work in IE3, you need to change it
// to something like "(new CardType())...".
// if (!CardType().isExpiryDate(tmpyear, tmpmonth)) {
if (!(new CardType()).isExpiryDate(tmpyear, tmpmonth)) {
alert("This card has already expired.");
return false;
}
if (form.cvv2Number.value.length == 0) {
alert("Please enter your credit card verification code.");
form.cvv2Number.focus();
return false;
}
if(!isNum(form.cvv2Number.value)) {
alert("Please enter your credit card verification code.");
form.cvv2Number.focus();
return false;
}
if(form.CardType.selectedIndex==3) { //American Express
   if(form.cvv2Number.value.length!=4) {
      alert("Please enter your 4 digit credit card verification code.");
      form.cvv2Number.focus();
      return false;
   }
}
else {
   if(form.cvv2Number.value.length!=3) {
      alert("Please enter your 3 digit credit card verification code.");
      form.cvv2Number.focus();
      return false;
   }
}
card = form.CardType.options[form.CardType.selectedIndex].value;
var retval = eval(card + ".checkCardNumber(\"" + form.CardNumber.value +
"\", " + tmpyear + ", " + tmpmonth + ");");
cardname = "";
if (retval) {
// comment this out if used on an order form
//alert("This card number appears to be valid.");
 form.submitButton.disabled = true;
    form.submitButton.value = "Please wait...";
    return true;

}
else {
// The cardnumber has the valid luhn checksum, but we want to know which
// cardtype it belongs to.
for (var n = 0; n < Cards.size; n++) {
if (Cards[n].checkCardNumber(form.CardNumber.value, tmpyear, tmpmonth)) {
cardname = Cards[n].getCardType();
break;
   }
}
if (cardname.length > 0) {
alert("This looks like a " + cardname + " number, not a " + card + " number.");
return false;
}
else {
alert("This card number is not valid.");
    form.submitButton.disabled = false;
    form.submitButton.value = "try again...";
return false;

      }
      
   }
   
}
0
 
WebGirlCrissyAuthor Commented:
Hi there - I've got it working thanks to your help.  You can ignore my latest question regarding where to place code... after taking a break and digging back in i've got it working! Thank you again!
0
All Courses

From novice to tech pro — start learning today.