Solved

disable submit after form validation

Posted on 2013-01-21
9
438 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
  • 5
  • 4
9 Comments
 
LVL 18

Expert Comment

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

Author Comment

by:WebGirlCrissy
Comment Utility
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
Comment Utility
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
 

Author Comment

by:WebGirlCrissy
Comment Utility
So how would I get around this?
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 18

Accepted Solution

by:
dj_alik earned 500 total points
Comment Utility
disable before  check and enable after
0
 

Author Comment

by:WebGirlCrissy
Comment Utility
ahhhh yes.. okay trying that!
0
 
LVL 18

Expert Comment

by:dj_alik
Comment Utility
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
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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…
This article discusses how to create an extensible mechanism for linked drop downs.
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)

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now