Home

Obtaining the User's Details

Page 12 of 22 - Chapter 14

The next two pages obtain the necessary information about the customer to process their order.

align="left">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.

align="left"> 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>

</HEAD>
<BODY>
<CENTER>
<FORM METHOD=POST ACTION="checkoutcredit.asp"
onSubmit="return checkCompleted(this)">

align="left">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.

align="left">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.

align="left"> 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.php'">
         <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!

Viewing an Empty Basket

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

Obtaining the User's Details (cont'd)

Sponsors

Home