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.