Page 13 of 22 - Chapter 14
Obtaining the User's Details (cont'd)
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>
<!--#include file="checkoutvalidate.inc"-->
<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.
<INPUT TYPE="HIDDEN" NAME="txtTitle"
VALUE="<%=Request.Form("radTitle")%>">
<INPUT TYPE="HIDDEN" NAME="txtFirstName"
VALUE="<%=Request.Form("txtFirstName")%>">
<INPUT TYPE="HIDDEN" NAME="txtLastName"
VALUE="<%=Request.Form("txtLastName")%>">
<INPUT TYPE="HIDDEN" NAME="txtEmail"
VALUE="<%=Request.Form("txtEmail")%>">
<INPUT TYPE="HIDDEN" NAME="txtStreet"
VALUE="<%=Request.Form("txtStreet")%>">
<INPUT TYPE="HIDDEN" NAME="txtCity"
VALUE="<%=Request.Form("txtCity")%>">
<INPUT TYPE="HIDDEN" NAME="txtLocality"
VALUE="<%=Request.Form("txtLocality")%>">
<INPUT TYPE="HIDDEN" NAME="txtPostCode"
VALUE="<%=Request.Form("txtPostCode")%>">
<INPUT TYPE="HIDDEN" NAME="txtCountry"
VALUE="<%=Request.Form("txtCountry")%>">
|
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
