Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 455
  • Last Modified:

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; } ">
0
WebGirlCrissy
Asked:
WebGirlCrissy
  • 5
  • 4
1 Solution
 
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
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
WebGirlCrissyAuthor Commented:
So how would I get around this?
0
 
dj_alikCommented:
disable before  check and enable after
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now