Solved

disable submit after form validation

Posted on 2013-01-21
9
449 Views
Last Modified: 2013-01-21
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
Comment
Question by:WebGirlCrissy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 18

Expert Comment

by:dj_alik
ID: 38802241
JavaScript: Preventing Double Form Submission
http://www.the-art-of-web.com/javascript/doublesubmit/#.UP2GeSPQmUk
0
 

Author Comment

by:WebGirlCrissy
ID: 38802323
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
 
LVL 18

Expert Comment

by:dj_alik
ID: 38802360
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:WebGirlCrissy
ID: 38802416
So how would I get around this?
0
 
LVL 18

Accepted Solution

by:
dj_alik earned 500 total points
ID: 38802436
disable before  check and enable after
0
 

Author Comment

by:WebGirlCrissy
ID: 38802453
ahhhh yes.. okay trying that!
0
 
LVL 18

Expert Comment

by:dj_alik
ID: 38802471
debug the javascript if you want to see what happened.
keep it simple and start with simple if else single check...
0
 

Author Comment

by:WebGirlCrissy
ID: 38802524
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
 

Author Closing Comment

by:WebGirlCrissy
ID: 38803932
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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question