JavaScript Tip:
Limit Visitors' Choices

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Suppose you're offering a special promotion of two free items with every large purchase. Customers select the two items they want from a list of choices on your shopping cart form. But what should you do if a customer selects more than two items from the list? Avoid that problem by including this simple JavaScript function that limits visitors' choices to only two selections.

The Basic Form With No Limits

Although a shopping cart form is generally pretty complex, we're going to keep this example simple so you can focus on what's happening with the checkboxes instead of getting confused by the larger form.

Here's the basic form code:

<form method=""  action="" name="checkout">
<p>Congratulations!  Your order of $534 qualifies
  you for two free items.  Please select <strong>
  two items only</strong> from the list below:</p>

<div style="border-color:navy; border-style:solid; 
  border-width:2px;width:300px;padding:5px;">
<input type="checkbox" id="armadillo">Imitation 
  Armadillo-skin wallet<br>
<input type="checkbox" id="jalapeno">Jalapeno 
  toothbrush cover<br>
<input type="checkbox" id="seder">Small chocolate 
  Seder plate<br>
<input type="checkbox" id="treat">Cousin 
  Christine's Horse Treats (bag of 6)<br>
<input type="checkbox" id="laces">2 sets of lemon-
  yellow boot laces<br>
</div>

</form>

That creates a basic form that looks like this:

Adding Form Controls With JavaScript

If the customer isn't paying close attention or just can't choose between the fabulous gifts, it's easy to select more than two items in the above form. What would you do if your customer selected all five instead of the two she was entitled to?

You could choose for her, but what if you send the toothbrush cover when she really wanted to boot laces more? You could also contact her directly, but that delays the order processing and consumes more of your time.

The best option is to ensure that customers can only select two items. Use a gentle reminder in a JavaScript alert box to remind them. Add this function to the HEAD section of your page:

What's happening in this script? Let's review it one step at a time:

Call the function inside the INPUT tag for each checkbox. This is an important step! Without a function call, the script won't work.

<form method=""  action="" name="checkoutLimited">
<p>Congratulations!  Your order of $534 qualifies
  you for two free items.  Please select <strong>
  two items only</strong> from the list below:</p>

<div style="border-color:navy; border-style:solid; 
  border-width:2px;width:300px;padding:5px;">
<input type="checkbox" id="armadillo" 
  onclick="setItems(this)">Imitation Armadillo-
  skin wallet<br>
<input type="checkbox" id="jalapeno" 
  onclick="setItems(this)">Jalapeno toothbrush 
  cover<br> 
<input type="checkbox" id="seder" 
  onclick="setItems(this)">Small chocolate Seder 
  plate<br> 
<input type="checkbox" id="treat" 
  onclick="setItems(this)">Cousin Christine's Horse 
  Treats (bag of 6)<br> 
<input type="checkbox" id="laces" 
  onclick="setItems(this)">2 Sets of lemon-yellow 
  boot laces<br> 
</div>

</form>

Here's how it works on the page. Select three items and see if you get the alert box.

Careful With Netscape Issues

Customers must have JavaScript turned on in their browsers for this script to work - but most shopping cart scripts also require JavaScript so you aren't locking out any customers by using the function.

The script works fine in Explorer, Opera, and Netscape 7, but watch for potential problems with Netscape 6.x browsers. Customers using Netscape 6.x who select more than two items receive the error message - but only the first time! After the first error message, the customer is free to select more than two items with no reminders.

This is small example of how browser differences can cause unexpected problems for webmasters. Browser differences are much more critical when they involve Web page layout and display. Always test your pages with Browser Photo. It shows you screen shots of your Web page in 16 different browser, browser versions, and operating system combinations. You'll find and fix display problems before your visitors complain about them.