Advertisement

11.03.2004 at 08:11PM PST, ID: 21194005
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
6.2

Change selection list to radio list for validation

Asked by minh_007 in JavaScript

Tags: , ,

Hi,

I'm creating a form to validate credit card numbers.  Got some scripts from http://javascript.internet.com.  The script I got from them has the credit card type in a selection list but the assignment require it in a radio button style.  Below is the code.  I have listed what I've changed to but it doesn't seemed to work.  Can someone help?  I'm very new with javascript.  The instructor is not teaching any javascripts at all so I get no help from class.  Please think of me as a newbie who doesn't know anything and don't make solution too hard to understand.  :-)  Thanks...

These codes are very long but the part that I need help is near the end of the codes.  I just put the whole thing so you guys can trace them all.  I commented the area that I need help on.

<HTML>
<HEAD>
<TITLE>Data Entry Form</TITLE>

<SCRIPT LANGUAGE="JavaScript">

var Cards = new makeArray(8);
Cards[0] = new CardType("MasterCard", "51,52,53,54,55", "16");
var MasterCard = Cards[0];
Cards[1] = new CardType("VisaCard", "4", "13,16");
var VisaCard = Cards[1];
Cards[2] = new CardType("AmExCard", "34,37", "15");
var AmExCard = Cards[2];
Cards[3] = new CardType("DinersClubCard", "30,36,38", "14");
var DinersClubCard = Cards[3];
Cards[4] = new CardType("DiscoverCard", "6011", "16");
var DiscoverCard = Cards[4];
Cards[5] = new CardType("enRouteCard", "2014,2149", "15");
var enRouteCard = Cards[5];
Cards[6] = new CardType("JCBCard", "3088,3096,3112,3158,3337,3528", "16");
var JCBCard = Cards[6];
var LuhnCheckSum = Cards[7] = new CardType();

/*************************************************************************\
CheckCardNumber(form)
function called when users click the "check" button.
\*************************************************************************/
function CheckCardNumber(form) {
var tmpyear;
if (form.CardNumber.value.length == 0) {
alert("Please enter a Card Number.");
form.CardNumber.focus();
return;
}
if (form.ExpYear.value.length == 0) {
alert("Please enter the Expiration Year.");
form.ExpYear.focus();
return;
}
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;
}
tmpmonth = form.ExpMon.options[form.ExpMon.selectedIndex].value;

if (!(new CardType()).isExpiryDate(tmpyear, tmpmonth)) {
alert("This card has already expired.");
return;
}
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.");


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.");
}
else {
alert("This card number is not valid.");
      }
   }
}
/*************************************************************************\
Object CardType([String cardtype, String rules, String len, int year,
                                        int month])
cardtype    : type of card, eg: MasterCard, Visa, etc.
rules       : rules of the cardnumber, eg: "4", "6011", "34,37".
len         : valid length of cardnumber, eg: "16,19", "13,16".
year        : year of expiry date.
month       : month of expiry date.
eg:
var VisaCard = new CardType("Visa", "4", "16");
var AmExCard = new CardType("AmEx", "34,37", "15");
\*************************************************************************/
function CardType() {
var n;
var argv = CardType.arguments;
var argc = CardType.arguments.length;

this.objname = "object CardType";

var tmpcardtype = (argc > 0) ? argv[0] : "CardObject";
var tmprules = (argc > 1) ? argv[1] : "0,1,2,3,4,5,6,7,8,9";
var tmplen = (argc > 2) ? argv[2] : "13,14,15,16,19";

this.setCardNumber = setCardNumber;  // set CardNumber method.
this.setCardType = setCardType;  // setCardType method.
this.setLen = setLen;  // setLen method.
this.setRules = setRules;  // setRules method.
this.setExpiryDate = setExpiryDate;  // setExpiryDate method.

this.setCardType(tmpcardtype);
this.setLen(tmplen);
this.setRules(tmprules);
if (argc > 4)
this.setExpiryDate(argv[3], argv[4]);

this.checkCardNumber = checkCardNumber;  // checkCardNumber method.
this.getExpiryDate = getExpiryDate;  // getExpiryDate method.
this.getCardType = getCardType;  // getCardType method.
this.isCardNumber = isCardNumber;  // isCardNumber method.
this.isExpiryDate = isExpiryDate;  // isExpiryDate method.
this.luhnCheck = luhnCheck;// luhnCheck method.
return this;
}

/*************************************************************************\
boolean checkCardNumber([String cardnumber, int year, int month])
return true if cardnumber pass the luhncheck and the expiry date is
valid, else return false.
\*************************************************************************/
function checkCardNumber() {
var argv = checkCardNumber.arguments;
var argc = checkCardNumber.arguments.length;
var cardnumber = (argc > 0) ? argv[0] : this.cardnumber;
var year = (argc > 1) ? argv[1] : this.year;
var month = (argc > 2) ? argv[2] : this.month;

this.setCardNumber(cardnumber);
this.setExpiryDate(year, month);

if (!this.isCardNumber())
return false;
if (!this.isExpiryDate())
return false;

return true;
}
/*************************************************************************\
String getCardType()
return the cardtype.
\*************************************************************************/
function getCardType() {
return this.cardtype;
}
/*************************************************************************\
String getExpiryDate()
return the expiry date.
\*************************************************************************/
function getExpiryDate() {
return this.month + "/" + this.year;
}
/*************************************************************************\
boolean isCardNumber([String cardnumber])
return true if cardnumber pass the luhncheck and the rules, else return
false.
\*************************************************************************/
function isCardNumber() {
var argv = isCardNumber.arguments;
var argc = isCardNumber.arguments.length;
var cardnumber = (argc > 0) ? argv[0] : this.cardnumber;
if (!this.luhnCheck())
return false;

for (var n = 0; n < this.len.size; n++)
if (cardnumber.toString().length == this.len[n]) {
for (var m = 0; m < this.rules.size; m++) {
var headdigit = cardnumber.substring(0, this.rules[m].toString().length);
if (headdigit == this.rules[m])
return true;
}
return false;
}
return false;
}

/*************************************************************************\
boolean isExpiryDate([int year, int month])
return true if the date is a valid expiry date,
else return false.
\*************************************************************************/
function isExpiryDate() {
var argv = isExpiryDate.arguments;
var argc = isExpiryDate.arguments.length;

year = argc > 0 ? argv[0] : this.year;
month = argc > 1 ? argv[1] : this.month;

if (!isNum(year+""))
return false;
if (!isNum(month+""))
return false;
today = new Date();
expiry = new Date(year, month);
if (today.getTime() > expiry.getTime())
return false;
else
return true;
}

/*************************************************************************\
boolean isNum(String argvalue)
return true if argvalue contains only numeric characters,
else return false.
\*************************************************************************/
function isNum(argvalue) {
argvalue = argvalue.toString();

if (argvalue.length == 0)
return false;

for (var n = 0; n < argvalue.length; n++)
if (argvalue.substring(n, n+1) < "0" || argvalue.substring(n, n+1) > "9")
return false;

return true;
}

/*************************************************************************\
boolean luhnCheck([String CardNumber])
return true if CardNumber pass the luhn check else return false.
Reference: http://www.ling.nwu.edu/~sburke/pub/luhn_lib.pl
\*************************************************************************/
function luhnCheck() {
var argv = luhnCheck.arguments;
var argc = luhnCheck.arguments.length;

var CardNumber = argc > 0 ? argv[0] : this.cardnumber;

if (! isNum(CardNumber)) {
return false;
  }

var no_digit = CardNumber.length;
var oddoeven = no_digit & 1;
var sum = 0;

for (var count = 0; count < no_digit; count++) {
var digit = parseInt(CardNumber.charAt(count));
if (!((count & 1) ^ oddoeven)) {
digit *= 2;
if (digit > 9)
digit -= 9;
}
sum += digit;
}
if (sum % 10 == 0)
return true;
else
return false;
}

/*************************************************************************\
ArrayObject makeArray(int size)
return the array object in the size specified.
\*************************************************************************/
function makeArray(size) {
this.size = size;
return this;
}

/*************************************************************************\
CardType setCardNumber(cardnumber)
return the CardType object.
\*************************************************************************/
function setCardNumber(cardnumber) {
this.cardnumber = cardnumber;
return this;
}

/*************************************************************************\
CardType setCardType(cardtype)
return the CardType object.
\*************************************************************************/
function setCardType(cardtype) {
this.cardtype = cardtype;
return this;
}

/*************************************************************************\
CardType setExpiryDate(year, month)
return the CardType object.
\*************************************************************************/
function setExpiryDate(year, month) {
this.year = year;
this.month = month;
return this;
}

/*************************************************************************\
CardType setLen(len)
return the CardType object.
\*************************************************************************/
function setLen(len) {
// Create the len array.
if (len.length == 0 || len == null)
len = "13,14,15,16,19";

var tmplen = len;
n = 1;
while (tmplen.indexOf(",") != -1) {
tmplen = tmplen.substring(tmplen.indexOf(",") + 1, tmplen.length);
n++;
}
this.len = new makeArray(n);
n = 0;
while (len.indexOf(",") != -1) {
var tmpstr = len.substring(0, len.indexOf(","));
this.len[n] = tmpstr;
len = len.substring(len.indexOf(",") + 1, len.length);
n++;
}
this.len[n] = len;
return this;
}

/*************************************************************************\
CardType setRules()
return the CardType object.
\*************************************************************************/
function setRules(rules) {
// Create the rules array.
if (rules.length == 0 || rules == null)
rules = "0,1,2,3,4,5,6,7,8,9";

var tmprules = rules;
n = 1;
while (tmprules.indexOf(",") != -1) {
tmprules = tmprules.substring(tmprules.indexOf(",") + 1, tmprules.length);
n++;
}
this.rules = new makeArray(n);
n = 0;
while (rules.indexOf(",") != -1) {
var tmpstr = rules.substring(0, rules.indexOf(","));
this.rules[n] = tmpstr;
rules = rules.substring(rules.indexOf(",") + 1, rules.length);
n++;
}
this.rules[n] = rules;
return this;
}
</script>



</HEAD>

<BODY BGCOLOR="#C0C0C0" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">
<form name="thisForm">

<table BGCOLOR="#C0C0C0" align = "center" border=1 width=600 height=30 cellspacing = 0 cellpadding=5>
      <tr>
<!-- First Name -->
            <td ALIGN = "LEFT"> <p> First Name: <input type="text" name="FirstName" size="25" maxlength="25">
<!-- Last Name -->
            <td ALIGN = "LEFT"> <p> Last Name: <input type="text" name="LastName" size="25" maxlength="25">
      </tr>

      <tr>
<!-- Address 1 -->
            <td colspan = 3 ALIGN = "LEFT"> <p> Address 1: <input type="text" name="Address1" size="60" maxlength="60">
      </tr>
      <tr>
<!-- Address 2 -->
            <td colspan = 3 ALIGN = "LEFT"> <p> Address 2: <input type="text" name="Address2" size="60" maxlength="60">
      </tr>
      <tr>
<!-- City -->
            <td ALIGN = "LEFT"> <p> City: <input type="text" name="City" size="20" maxlength="25">
<!-- State -->
            <!-- START STATE SELECTION -->

            <td ALIGN = "LEFT"> <p> State:
                  <select>
                        <option name = "Alabama">Alabama
                        <option name = "Alaska">Alaska
                        <option name = "Arizona">Arizona
                        <option name = "Arkansas">Arkansas
                        <option name = "California">California
                        <option name = "Colorado">Colorado
                        <option name = "Connecticut">Connecticut
                        <option name = "Delaware">Delaware
                        <option name = "Florida">Florida
                        <option name = "Georgia">Georgia
                        <option name = "Hawaii">Hawaii
                        <option name = "Idaho">      Idaho
                        <option name = "Illinois">Illinois
                        <option name = "Indiana">Indiana
                        <option name = "Iowa">Iowa
                        <option name = "Kansas">Kansas
                        <option name = "Kentucky"> Kentucky
                        <option name = "Louisiana"> Louisiana
                        <option name = "Maine">Maine
                        <option name = "Maryland">Maryland
                        <option name = "Massachusetts">Massachusetts
                        <option name = "Michigan">Michigan
                        <option name = "Minnesota">Minnesota
                        <option name = "Mississippi">Mississippi
                        <option name = "Missouri">Missouri
                        <option name = "Montana">Montana
                        <option name = "Nebraska">Nebraska
                        <option name = "Nevada">Nevada
                        <option name = "New Hampshire">New Hampshire
                        <option name = "New Jersey">New Jersey
                        <option name = "New Mexico">New Mexico
                        <option name = "New York">New York
                        <option name = "North Carolina">North Carolina
                        <option name = "North Dakota">North Dakota
                        <option name = "Ohio">Ohio
                        <option name = "Oklahoma">Oklahoma
                        <option name = "Oregon">Oregon
                        <option name = "Pennsylvania">Pennsylvania
                        <option name = "Rhode Island">Rhode Island
                        <option name = "South Carolina">South Carolina
                        <option name = "South Dakota">South Dakota
                        <option name = "Tennessee">Tennessee
                        <option name = "Texas">Texas
                        <option name = "Utah">Utah
                        <option name = "Vermont">Vermont
                        <option name = "Virginia">Virginia
                        <option name = "Washington">Washington
                        <option name = "West Virginia">West Virginia
                        <option name = "Wisconsin">Wisconsin
                        <option name = "Wyoming">Wyoming
                  </select> </p>

                  <!-- END STATE SELECTION -->

<!-- Zip Code -->
            <td ALIGN = "LEFT" width = 150> <p> Zip: <input type="text" name="Zip" size="10" maxlength="10">
      </tr>
      <tr>
<!-- Phone Number -->
            <td ALIGN = "LEFT"> <p> Phone: <input type="text" name="Phone" size="14" maxlength="14">
      </tr>
      <tr>
<!-- Merchandise Name -->
                  <td ALIGN = "LEFT" colspan = 3> <p> Merchandise Name: <input type="text" name="MerchandiseName" size="71" maxlength="71">
      </tr>
      <tr>
<!-- Stock Number, Order ID, Order Date -->
            <td ALIGN = "LEFT" width = 240> <p> Stock Number: <input type="text" name="StockNumber" size="14" maxlength="14">
            <td ALIGN = "LEFT"> <p> Order ID: <input type="text" name="OrderID" size="14" maxlength="14">
            <td ALIGN = "LEFT" width =200> <p> Order Date: <input type="text" name="OrderDate" size="10" maxlength="10">
      </tr>
<!-- Credit Card Type -->




<!-- This is their code -->
<!-- This is their code -->
<!-- This is their code -->
<!-- This is their code -->
<!-- This is their code -->
<!-- This is their code -->


<!--      <tr>
            <td colspan = 3> <p>
                  Card Type:
                  <select name="CardType">
                        <option value="MasterCard">MasterCard
                        <option value="VisaCard">Visa
                        <option value="AmExCard">American Express
                        <option value="DinersClubCard">Diners Club
                        <option value="DiscoverCard">Discover
                        <option value="enRouteCard">enRoute
                        <option value="JCBCard">JCB
                  </select>
            </td> </p>
      </tr>
-->

                                         <!-- NEED HELP HERE -->
                                         <!-- NEED HELP HERE -->
                                         <!-- NEED HELP HERE -->
                                         <!-- NEED HELP HERE -->
                                         <!-- NEED HELP HERE -->
                                         <!-- NEED HELP HERE -->
                                         <!-- NEED HELP HERE -->

<!-- This is my code that doesn't work -->



      <tr>
            <td colspan = 3> <p> <center>Card Type </center>
                  <input type="radio" name="CardType" value="VisaCard" selected>Visa
                  <input type="radio" name="CardType" value="MasterCard">Master Card
                  <input type="radio" name="CardType" value="AmExCard">American Express
                  <input type="radio" name="CardType" value="DinersClubCard">Diners Club
                  <input type="radio" name="CardType" value="DiscoverCard">Discover
                  <input type="radio" name="CardType" value="enRouteCard">enRoute
                  <input type="radio" name="CardType" value="JCBCard">JCB
            </p>
      </tr>



                       <!-- END OF THE CODES THAT NEEDED HELP -->
                       <!-- END OF THE CODES THAT NEEDED HELP -->
                       <!-- END OF THE CODES THAT NEEDED HELP -->
                       <!-- END OF THE CODES THAT NEEDED HELP -->



      <tr>
<!-- Credit Card Number -->
            <td ALIGN = "LEFT" colspan = 2> <p> Credit Card Number: <input name="CardNumber" size="16" maxlength="19"><br>
      </tr>
      <tr>
            <td ALIGN = "LEFT" colspan = 3> <p> Expiration Date: Month
                  <select name="ExpMon">
                        <option value="1" selected>01
                        <option value="2">02
                        <option value="3">03
                        <option value="4">04
                        <option value="5">05
                        <option value="6">06
                        <option value="7">07
                        <option value="8">08
                        <option value="9">09
                        <option value="10">10
                        <option value="11">11
                        <option value="12">12
                  </select>

                  Year
                  <select name="ExpYear">
                        <option value="00" selected> 2000
                        <option value="01"> 2001
                        <option value="02"> 2002
                        <option value="03"> 2003
                        <option value="04"> 2004
                        <option value="05"> 2005
                        <option value="06"> 2006
                        <option value="07"> 2007
                        <option value="08"> 2008
                        <option value="09"> 2009
                        <option value="10"> 2010
                        <option value="11"> 2011
                        <option value="12"> 2012
                        <option value="13"> 2013
                        <option value="14"> 2014
                        <option value="15"> 2015
                        <option value="16"> 2016
                        <option value="17"> 2017
                        <option value="18"> 2018
                        <option value="19"> 2019
                        <option value="20"> 2020
                  </select>
                  </p>
      <tr> <td> </td> <td>
      <p>
<!-- Submit Button
      <input type="submit" value="Submit" onClick="SubmitForm()">
<!-- Reset Button
      <input type="reset" value="Reset"> -->
</p>
      </tr>

      <tr>
            <td>
            <td> <input type="button" value="Check Card Number" OnClick="CheckCardNumber(this.form)"><br>
            <td>
      </tr>
</table>
</form>

</BODY>
</HTML>Start Free Trial
 
Keywords: Change selection list to radio list for val…
Title
1 South, East, North
2 South-west England
3 Radio buttons
4 Americans are dumb
5 Americans good or not
6 American culture
 
Loading Advertisement...
 
[+][-]11.04.2004 at 12:52AM PST, ID: 12491215

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]11.04.2004 at 05:50AM PST, ID: 12493415

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zone: JavaScript
Tags: javascript, selected, validation
Sign Up Now!
Solution Provided By: CyberSoft
Participating Experts: 2
Solution Grade: C
 
 
[+][-]02.03.2005 at 11:10PM PST, ID: 13222959

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32