Example of an HTML Form Using JavaScript and the NOSCRIPT Element

This is an example of an HTML form — using JavaScript to calculate out-of-pocket health care expenses — that also makes provisions for users who may be using non-JavaScript-capable browsers.

To see the functionality of the form, first try it with JavaScript enabled on your browser. Enter a few numbers in the boxes to the right of the form, and you'll see that the total on the bottom is automatically updated each time you make a change in one of the upper boxes.

Next, turn JavaScript off in your browser and press the "Clear Data" button at the bottom of the form. In the cell where the total had appeared the last time, the message "Add together all of the amounts in the above columns to arrive at a total" will now appear. This is what a user without JavaScript capability would see.

Using the NOSCRIPT element allows you to provide information to users without JavaScript capability. In this instance, we were able to give the user the information they would need to approximate the functionality of the original calculator. Each input text box includes an instruction to run the JavaScript program which performs the running total calculation. Because Javascript is disabled, this program instruction is ignored. Without using the NOSCRIPT element in the total cell, the user might not know what to do; using the element, the instructions are clear.

Display the text of the code used for both instances of the total cell

Based on the Health Care Spending Account Worksheet

Annual estimated expenses for services rendered in the upcoming Plan Year not reimbursed by your medical, dental or other plans.

Type of Expense Amount
per Year
MEDICAL EXPENSES, SUCH AS:

See a Bobby report on this page


Return to the Technology page

Copyright 2001 Debi Orton