Java Script Length Units Converter

By Stephen Bucaro

The goal for any Web site owner is get to attract visitors and get them to stick around. This is referred to as making your Web site "sticky". One way to do that is to provide useful features like online calculators. In this article, I provide you with Java Script code for a Length Units Converter. For example, your visitor can enter a length in English feet and it will be converted to a length in metric meters.

I keep the code as simple as possible and I will explain the code in detail so that you will feel confident enough to modify the code for your own Web site. If you follow the description here, you can use this same basic structure to design all kinds of units converters, for example, weight, volume, and area units converters. You could create a Web site that is totally dedicated to providing calculators and converters; that should draw plenty of traffic.

The Length Units Converter has three parts; the form where the user enters a length value and selects measurement units, a matrix of conversion factors, and a small Java Script function to perform the units conversion. At the end of this article is a working model of the application to check out.

The code for the form is shown below.

<form name="convForm" onSubmit="javascript:return false;">

Length: <input type="text" name="fromLength" value="1"
  size=6 style="text-align:right" onChange="Convert()";>

<select name="fromUnits" onChange="Convert()";>
<option>inches</option>
<option>feet</option>
<option>yards</option>
<option>miles</option>
<option>centimeters</option>
<option>meters</option>
<option>kilometers</option>
</select>
=
<span id="toLength" style="border-style:solid;
 border-width:1px; width:90px; text-align:right">1</span>

<select name="toUnits" onChange="Convert()";>
<option>inches</option>
<option>feet</option>
<option>yards</option>
<option>miles</option>
<option>centimeters</option>
<option>meters</option>
<option>kilometers</option>
</select>

</form>

There are several interesting things to note about this code. The form does not provide a submit button (or any button at all). In fact, the onSubmit event of the form is disabled by making it return a value of "false". The reason for this is because if the user hits the "Enter" key after entering a value in the form's text box, the form would be submitted, causing it to lose the values entered. Not a big deal, but annoying to the user.

The form works by executing a function named "Convert" in response to the onChange events of the text box and select boxes (drop-down lists). The "Convert" function will display the results of the conversion in the html span. Note the style rule applied to the text box to make the text align to the right, and the style rules applied to the span to make it appear as a box with text aligned to the right.

The order that the units are listed in the options list is important. They must be listed in the same order as the converion factors are listed in the matrix. A matrix is defined in Java Script as an "array of arrays". The code for this is shown below.

var factors = new Array(inches,feet,yards,miles,
  centimeters,meters,kilometers);

Each of the elements of this array (inches, feet, yards, and so on) is an array itself. The array elements must be listed in the same order as the options are listed in the select element. I emphasize this because if you modify the application, for example add millimeters, you must put the conversion factors in the proper order in the arrays.

RSS Feed

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues
 FREE Graphics Warehouse