Page 12 of 22 - Chapter 14
Obtaining the User's Details
The next two pages obtain the necessary information about the customer to process
their order.
The first page obtains information regarding name and delivery
address. We also obtain their e-mail address as we use that later to send them
conformation of their order.
In between
the <HEAD> tags we include a new include file – checkout_validate.inc – into this page which we'll create
shortly. As its name suggests, this file contains a number of client-side JavaScript
functions which will be used to validate the form's content when the user clicks
the submit button. We have added an event handler for the form's onSubmit event which calls one of the
validate functions inside checkout_validate.inc.
The value returned by this function will prove important: if false is returned then the form's submit action
will be cancelled. Also note that in the onSubmit
event handler we call checkCompleted and
pass it one argument – this, which in this
context refers to the element that is the cause of the event firing. Here, it
is the form itself.
<% @LANGUAGE="JScript" %>
<HTML>
<HEAD>
<!--#include file="checkoutvalidate.inc"-->
</HEAD>
<BODY>
<CENTER>
<FORM METHOD=POST ACTION="checkoutcredit.asp"
onSubmit="return checkCompleted(this)">
|
The remainder of the page consists of the form elements contained
within a table for formatting. At the top is a group of radio buttons for
selecting the customer's title. When the form is submitted only the value
of the radio button that has been selected by the user will be sent.
The remainder of the form consists
of input boxes, each of which has its maxlength property set to match the
maximum size of the relevant database field which acts as a basic form of
validation. At least we know the user has not entered a string value length
greater than we can store. The problem comes if we change the size of the
database fields, as we must remember to update the page. This problem could
be overcome by building the page dynamically using ASP script. Using ADO we
could obtain the correct sizes of each field and populate the maxlengths
on the basis of this information. This would increase maintainability but
at the expense of scalability as server processing load would be increased
significantly. Here I have gone for scalability by having static values.
The
last input element in the form is a text box for the customer's country. It
would help ensure valid data if we changed this to a select element with a
drop down list of countries rather than a text box. For this example I kept
it as a text box to save typing a long list of countries!
<FONT FACE="Comic Sans MS" SIZE="3"
color="Navy">
Please enter your NAME, address and e-mail address below.<BR>
</FONT>
<TABLE>
<TR>
<TD><FONT FACE="Comic Sans MS" SIZE="2">Title</FONT></TD>
<TD>
<FONT FACE="Comic Sans MS" SIZE="2">
Mr<INPUT NAME="radTitle" TYPE="radio"
VALUE="Mr">
Mrs<INPUT NAME="radTitle" TYPE="radio"
VALUE="Mrs">
Miss<INPUT NAME="radTitle" TYPE="radio"
VALUE="Miss">
Ms.<INPUT NAME="radTitle" TYPE="radio"
VALUE="Ms.">
Dr.<INPUT NAME="radTitle" TYPE="radio"
VALUE="Dr.">
</FONT>
</TD>
</TR>
<TR>
<TD><FONT FACE="Comic Sans MS" SIZE="2">First
Name</FONT>
<TD><INPUT TYPE="Text" NAME="txtFirstName"
maxlength="50">
</TR>
<TR>
<TD><FONT FACE="Comic Sans MS" SIZE="2">Last
Name</FONT>
<TD><INPUT TYPE="Text" NAME="txtLastName"
maxlength="50">
</TR>
<TR>
<TD><FONT FACE="Comic Sans MS" SIZE="2">E-mail
Address</FONT>
<TD><INPUT TYPE="Text" NAME="txtEmail"
maxlength="75">
</TR>
<TR>
<TD><FONT FACE="Comic Sans MS" SIZE="2">Street</FONT>
<TD><INPUT TYPE="Text" NAME="txtStreet"
maxlength="75">
</TR>
<TR>
<TD><FONT FACE="Comic Sans MS" SIZE="2">City</FONT>
<TD><INPUT TYPE="Text" NAME="txtCity"
maxlength="50">
</TR>
<TR>
<TD><FONT FACE="Comic Sans MS" SIZE="2">County/State</FONT>
<TD><INPUT TYPE="Text" NAME="txtLocality"
maxlength="50">
</TR>
<TR>
<TD><FONT FACE="Comic Sans MS" SIZE="2">Post/Zip
Code</FONT>
<TD><INPUT TYPE="Text" NAME="txtPostCode"
maxlength="15">
</TR>
<TR>
<TD><FONT FACE="Comic Sans MS" SIZE="2">Country</FONT>
<TD><INPUT TYPE="Text" NAME="txtCountry"
maxlength="50">
</TR>
<TR>
<TD COLSPAN=2>
<INPUT TYPE="reset" NAME="cmdReset"
VALUE="Clear form">
<INPUT TYPE="button" NAME="cmdPrevious"
VALUE=" Back "
onClick="window.location.href='checkoutframe.htm'">
<INPUT TYPE="submit" NAME="cmdSubmit"
VALUE="Continue">
</TD>
</TR>
</TABLE>
</FORM>
</CENTER>
</BODY>
</HTML>
|
Save the page as PersonalDetails.asp
The final page, as far as inputting user details is concerned,
is CheckoutCredit.asp which gets that all
important information we need to get our hands on the user's money!
