InformIT: Sams Teach Yourself HTML 4 in 24 Hours

Adding Up an Order Form

One of the most common uses of scripting is making an order form that adds its own totals based on what items the customer selects. Figure 19.6 is an example that you can copy to create self-totaling forms yourself.

Figure 19.6 This simple order form uses JavaScript to automatically compute totals.

Although the code in Figure 19.6 is unrealistically simple for any real company's order form (most companies would like at least the address and phone number of the person placing the order), it is a completely functional JavaScript-enhanced Web page. Figure 19.7 demonstrates what the form would look like after a user entered the number 3 in the first box and the number 1 in the third box of the Qty column. The numbers in the Totals column are computed automatically.

Figure 19.7 The JavaScript in Figure 19.6 produces this form. Here, the customer has entered some desired quantities and the form has figured out the total cost.

Most programmers could probably customize and expand the page in Figure 19.6 quite a bit without knowing anything whatsoever about JavaScript. What's more, this page works on any server and any JavaScript-enabled browser on any operating system.

Even if you don't do programming at all, you can easily adapt the code in Figure 19.6 to your own uses. The following list highlights the key elements of this JavaScript that you'll need to understand.

As in the earlier example, I started by giving a name to all the parts of the page I would need to modify. Using the name attribute, I named the <form> itself "orderform". I also gave each input element in the form a name, such as "qty1", "qty2", "total1", "total2", and so on.
The HTML page itself is always named "document", so I refer to the form as "document.orderform". The first input item on that form is "document.orderform.qty1", the "grandtotal" input item is "document.orderform.grandtotal", and so forth. You'll notice that I put f=document.orderform at the beginning of each <script>. This just saved me some typing, since I could then use the letter f from then on instead of typing out document.orderform as part of every name.
The function near the top of the page, which I chose to name ComputeTotals(), is the part of the script that actually carries out the computations. This function is pretty straightforward: It multiplies the quantities the user entered by the prices to get the totals, then adds the totals to make a grand total. The only tricky thing here is all that parseInt() business. You have to use parseInt() to indicate that something is a number whenever you want to do computations. (This isn't necessary in most other programming languages. JavaScript is a little weird that way.) If you want to allow numbers that aren't integers, such as 12.5 or 13.333, use parseFloat() instead of parseInt().
The <script> at the bottom of the page just sets all the input elements to 0 when the page first appears. This has to be done after the form itself is defined on the page with the <form> and </form> tags.
The real action happens in the <input> tags. Just as the earlier example in this hour uses OnMouseOver to respond to a mouse movement, this example responds to OnFocus and OnBlur. The OnFocus stuff happens when the user first clicks in (or tabs to) an input box to enter data. The OnBlur commands are triggered when the user is done entering data in a box and moves on to the next one.
Take a look at the <input> tags named qty1, qty2, qty3, and qty4. In each of these, you'll see OnBlur="CalculateTotals()", which simply does all the math in the CalculateTotals function in the top <script> every time the user enters a number in the Qty column. (JavaScript takes care of displaying the totals and grand total automatically, so you don't see any explicit command to "print" these numbers.)
Now look at all the other <input> tags. Each contains two commands, similar to the following:
```
OnFocus="document.orderform.qty2.focus();
         document.orderform.qty2.select()"
```
This causes the cursor to skip to the next input box so that the user doesn't get a chance to modify the totals. It also causes whatever data is in that next input box to be selected, so whatever the user types will replace the old data instead of being tacked onto the end of it.

Whew! That may seem like a lot to figure out, especially if you've never done any programming before! With a little experimentation and a few careful readings of this explanation, you should be able to put together a simple automatic order form of your own without any further knowledge of JavaScript.

Note

Time for a confession: There's a form-input tag I didn't tell you about in Hour 8, "Creating HTML Forms." The <button> tag creates a button—sort of like <input type="submit"> , except that a <button> button doesn't actually do anything—not until you tell it what to do with some JavaScript, that is. If a programmable button sounds like something you'd like to use on your forms, hop on over to the JavaScript Button example at http://24hourHTMLcafe.com/hour19 to see one in action, and check out the HTML that makes it work.

The Wide World of JavaScript | Next Section

Previous Section