?
Solved

disable submit after form validation

Posted on 2013-01-21
9
Medium Priority
?
451 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

Author Comment

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

Accepted Solution

by:
dj_alik earned 2000 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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

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…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

765 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