Home

Obtaining the User's Details (cont'd)

Page 13 of 22 - Chapter 14

It's smaller in terms of number of visible page elements, but more complex in terms of validation as we have a radio group, a couple of select elements with dates that need validating and a text box which must contain a valid number only. Again, all of the validation functions are in the checkout_validate.inc file we include inside the head of this page. Because there is more to check in this form than on the personal details page form, a separate function has been created to handle the onSubmit event. Using functions defined in checkout_validate.inc, it checks that the form is fully completed, the credit card number actually contains numbers and that the card expiry date is valid. If any of these checks fails then the form submit event is cancelled by returning false. As in the previous page's onSubmit, we are passing a reference to the form as a parameter of the function handling the onSubmit.

<% @LANGUAGE="JScript" %>
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
function frmCreditonsubmit(theForm)
{
   // Check form fully filled in
   if (checkCompleted(theForm) == false)
   {
      return false;
   }
   // Remove everything except numbers from CardNo
   theForm.txtCardNo.VALUE = numericOnly(theForm.txtCardNo.VALUE);

   // If removing all but numbers results in nothing then alert user
   if (theForm.txtCardNo.VALUE == "")
   {
      alert("Your have entered your credit card number incorrectly");
      theForm.txtCardNo.focus();
      return false;
   }
   // check credit card expiry date is valid
   if (checkCardExpDate(theForm.cboExpMonth,theForm.cboExpYear) == false)
   {
      return false;
   }
}
</SCRIPT>
</HEAD>
<BODY>
<FONT FACE="Comic Sans MS" SIZE="3" color="Navy">
   <P align="center">
      Please enter your credit card details below.
   </P>
</FONT>
<FORM METHOD=POST NAME="frmCredit" ACTION="checkoutconfirm.asp"
      onSubmit="return frmCreditonsubmit(this)">

The next form elements are hidden input boxes that we populate using ASP script with the values the user submitted in the personal details page. This is how we maintain state over the course of the four pages involved in obtaining customer details except for the items ordered which remain in the basket cookie until the very last page.

The remainder of the page consists of the form elements into which the customers enter their credit card details. Card expiry date has been based upon two drop down select elements: one for the month and one for the year. This ensures that the user can enter only valid values, which is particularly important for dates as there are so many variations possible. For example, if we just used a text box, 11/1999, 11-99,11 01 are all valid but would cause us headaches if we had to deal with each possibility.

The cmdPrevious button at the end of the form contains history.back() in its onClick event rather than specifying the page with window.location.href='personaldetails.asp'. If the history object's back() method is used then the personal details page is displayed with all the information that the user filled in. Using location.href however returns you to a blank form to fill out once again.

<DIV align="center">
   <TABLE>
   <TR>
      <TD COLSPAN=4>
         <STRONG>
            <FONT FACE="Comic Sans MS" SIZE="2">Card Holders Name</FONT>
         </STRONG>
      </TD>
   </TR>
   <TR>
      <TD COLSPAN="4">
         <INPUT TYPE="TEXT" NAME="txtCardHolderName" maxlength="50">
      </TD>
   </TR>
   <TR>
      <TD COLSPAN=4>
         <BR>
         <STRONG>
            <FONT FACE="Comic Sans MS" SIZE="2">Credit Card No.</FONT>
         </STRONG>
      </TD>
   </TR>
   <TR>
      <TD COLSPAN="4">
         <INPUT TYPE="TEXT" NAME="txtCardNo" maxlength=20>
      </TD>
   </TR>
   <TR>
      <TD COLSPAN=4>
      <BR>

<STRONG>
            <FONT FACE="Comic Sans MS" SIZE="2">Credit Card Type</FONT>
         </STRONG>
      </TD>
   </TR>
   <TR>
      <TD>
         <FONT FACE="Comic Sans MS" SIZE="2">Visa</FONT>
         <INPUT NAME="radCardType" TYPE="radio" VALUE="Visa">
      </TD>
      <TD>
         <FONT FACE="Comic Sans MS" SIZE="2">Mastercard</FONT>
         <INPUT NAME="radCardType" TYPE="radio" VALUE="Mastercard">
      </TD>
      <TD>
         <FONT FACE="Comic Sans MS" SIZE="2">Switch</FONT>
         <INPUT NAME="radCardType" TYPE="radio" VALUE="Switch">
      </TD>
      <TD>
         <FONT FACE="Comic Sans MS" SIZE="2">Access</FONT>
         <INPUT NAME="radCardType" TYPE="radio" VALUE="Access">
      </TD>
   </TR>
   <TR>
      <TD COLSPAN="4">
      <BR>
         <STRONG>
            <FONT FACE="Comic Sans MS" SIZE="2">Card Expiry Date</FONT>
         </STRONG>
      </TD>
   </TR>
   <TR>
      <TD COLSPAN="4">
         <FONT FACE="Comic Sans MS" SIZE="2">
         <SELECT NAME="cboExpMonth" SIZE="1">
            <OPTION VALUE="01">01</OPTION>
            <OPTION VALUE="02">02</OPTION>
            <OPTION VALUE="03">03</OPTION>
            <OPTION VALUE="04">04</OPTION>
            <OPTION VALUE="05">05</OPTION>
            <OPTION VALUE="06">06</OPTION>
            <OPTION VALUE="07">07</OPTION>
            <OPTION VALUE="08">08</OPTION>
            <OPTION VALUE="09">09</OPTION>
            <OPTION VALUE="10">10</OPTION>
            <OPTION VALUE="11">11</OPTION>
            <OPTION VALUE="12">12</OPTION>
         </SELECT>
         <SELECT NAME="cboExpYear" SIZE="1">
            <OPTION VALUE="1999">1999</OPTION>
            <OPTION VALUE="2000">2000</OPTION>
            <OPTION VALUE="2001">2001</OPTION>
            <OPTION VALUE="2002">2002</OPTION>
            <OPTION VALUE="2003">2003</OPTION>
            <OPTION VALUE="2004">2003</OPTION>
            <OPTION VALUE="2005">2003</OPTION>
         </SELECT>
         </FONT>
      </TD>
   </TR>
   <TR>
      <TD COLSPAN="4">
         <INPUT NAME="reset" TYPE="reset" VALUE="Clear Form">
         <INPUT NAME="cmdPrevious" TYPE="button" VALUE="Back"
                onClick="history.back()">
         <INPUT NAME="Submit" TYPE="submit" VALUE="Continue">
      </TD>
   </TR>
   </TABLE>
   </DIV>
</FORM>
</BODY>
</HTML>

Save the page as CheckoutCredit.asp

Obtaining the User's Details

(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17) (18) (19) (20) (21) (22)

Validating the User's Details

Sponsors

Home