Home

Validating the User's Details (cont'd)

Page 15 of 22 - Chapter 14

If the current year is the same as the year the user selected and the month is before the current month then we know the card has expired and we inform the user.

// Checks card not expired already
function checkCardExpDate(cboExpMonth,cboExpYear)
{
   var nowDate = new Date();
   var nowYear = nowDate.getYear();
   var nowMonth = nowDate.getMonth() + 1;
   var expYear = cboExpYear.options[cboExpYear.selectedIndex].VALUE;
   var expMonth = cboExpMonth.options[cboExpMonth.selectedIndex].VALUE;

   // some browsers return only 99 for the year so we need
   // to compensate for that
   if (nowYear == 0)
   {
      nowYear = 2000;
   }
   if (nowYear < 1900)

   {
      nowYear = nowYear + 1900;
   }
   if (expYear <= nowYear)
   {
      if (expMonth < nowMonth)
      {
         alert("According to the date you have entered,
                your credit card has expired")
         cboExpMonth.focus();
         return false;
      }
   }
}
</SCRIPT>

Save this file as checkout_validate.inc.

The End – A Final Summary of the Order Details

The final page, before the user commits to purchasing, is the summary page. We have all the details we need to complete the order and we are giving the customer one last chance to check the details before sending their order.

The form contains all the information the user has entered and will be passed in the final form submit. The information obtained from the previous forms is placed at the top of the page in hidden text boxes whose values we populate using server-side JScript.

<HTML>
<HEAD>
   <TITLE>Confirm Details</TITLE>
</HEAD>
<BODY>
<FORM ACTION="ProcessOrder.asp" method="POST">
   
   <INPUT TYPE="HIDDEN" NAME="txtTitle"
          VALUE="<%=Request.Form("txtTitle")%>">
   <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")%>">
   
   <INPUT TYPE="HIDDEN" NAME="txtCCHolderName"
          VALUE="<%=Request.Form("txtCardHolderName") %>">
   <INPUT TYPE="HIDDEN" NAME="txtCCNo"
          VALUE="<%=Request.Form("txtCardNo") %>">
   <INPUT TYPE="HIDDEN" NAME="txtCCType"
          VALUE="<%=Request.Form("radCardType") %>">
   <INPUT TYPE="HIDDEN" NAME="txtCCExpire"
          VALUE="<%=Request.Form("cboExpMonth") + "/" +
                 Request.Form("cboExpYear") %>">

Our next task is to display a summary of the information the user entered starting with the actual items in the order. We use the Basket.inc file we created earlier (and used for the shopping basket) to actually display the summary, this time we want it to be read only so bReadOnly is set to true. The Basket.inc file has hidden input elements with the ItemId's and quantities of the order and these will be sent when the form is submitted.

<FONT FACE="Comic Sans MS" SIZE="+1" color="Navy">
      <P>Your order details are listed below.</P>
      <P>
         Once you have confirmed the details click
         <INPUT TYPE="Submit" NAME="cmdSubmit" VALUE="Submit Order">
         to send your order
      </P>
   </FONT>
   <STRONG><FONT FACE="Comic Sans MS" SIZE="3" color="#FF8040">
      <br>The following items<br><br>
   </FONT></STRONG>

   
<%
   bReadOnly = true;
%>
   
   <STRONG><FONT FACE="Comic Sans MS" SIZE="3" color="#FF8040">
      Will be delivered to<br>
   </FONT></STRONG>

The next summary we display is that of the customer's name and address details which we format by placing inside a table. The values are populated by ASP script which retrieves them from those posted in the form submit that brought us to this page.

<TABLE cellspacing="2" cellpadding="2" border="0">
   <TR>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            <%=Request.Form("txtTitle")%> 
            <%=Request.Form("txtFirstName")%> 
            <%=Request.Form("txtLastName")%>
         </FONT></STRONG>
      </TD>
   </TR>
   <TR>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            <%=Request.Form("txtStreet")%>
         </FONT></STRONG>
      </TD>
   </TR>
   <TR>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            <%=Request.Form("txtCity")%>
         </FONT></STRONG>
      </TD>
   </TR>
   <TR>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            <%=Request.Form("txtLocality")%>
         </FONT></STRONG>
      </TD>
   </TR>
   <TR>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            <%=Request.Form("txtPostCode")%>
         </FONT></STRONG>
      </TD>
</TR>
   <TR>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            <%=Request.Form("txtCountry")%>
         </FONT></STRONG>
      </TD>
   </TR>
   </TABLE>

The summary is completed with a summary of the credit card details and a restating of exactly how much will be debited from the card.

<br>
   <STRONG><FONT FACE="Comic Sans MS" SIZE="3" color="#FF8040">
      A total of <FONT color="Black">£<%=lTotal + 2.5 %></FONT>
      will be debited from your <%=Request.Form("radCardType")%> card
      (Card details below)
   </FONT></STRONG>
   
   <TABLE>
   <TR>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            Name of credit card holder :
         </FONT></STRONG>
      </TD>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            <%=Request.Form("txtCardHolderName")%>
         </FONT></STRONG>
      </TD>
   </TR>
   <TR>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            Card Number
         </FONT></STRONG>
      </TD>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            <%= Request.Form("txtCardNo") %>
         </FONT></STRONG>
      </TD>
   </TR>
   <TR>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            Expiry Date
         </FONT></STRONG>
      </TD>
      <TD>
         <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
            <%=Request.Form("cboExpMonth")%> /
            <%=Request.Form("cboExpYear") %>
         </FONT></STRONG>
      </TD>
   </TR>
   </TABLE>
   <STRONG><FONT FACE="Comic Sans MS" SIZE="2">
      Click
      <INPUT TYPE="Submit" NAME="cmdSubmitBottom" VALUE="Purchase items">
    to send your order
   </FONT></STRONG>
</FORM>
</BODY>
</HTML>

Save the page as CheckoutConfirm.asp

Validating 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)

Check Out the Checkout

Sponsors

Home