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.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Java Script Length Units Converter

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 RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268