CIT041J Lecture Notes

One of the most common uses for JavaScript is with forms, to gather information, process information, or just to validate the form before submitting it.

Here is a form that converts Fahrenheit to Celsius temperatures. Give it a try. (212°F converts to 100°C; 98.6°F converts to 37°C. Try -40°F for a big surprise.)

<form action="#">
   <input type="text" size="6" /> F  =
   <input type="text" size="6" /> C  
   <input type="button" value=" Convert " />
</form>

As you saw with links and images, the browser automatically builds objects that correspond to the form, each of the input fields, and the button. These are all accessible through various document properties (much as you used the document.links and document.images arrays), but accessing the correct field by numeric index can get tricky.

In order to make access to the elements of the form easier from JavaScript, you give the form and its text fields names by adding the name= attribute to them. You also need to add an event handler when the button is clicked. The new HTML code follows, with additions in bold:

<form name="temperature" action="#">
   <input type="text" name="fahrBox" size="6" /> F  =
   <input type="text" name="celsiusBox" size="6" /> C  
   <input type="button" value=" Convert "
   onclick="convert_temp();" />
</form>

Note: Just like variables, field names must consist only of letters, digits, and the underscore character. They cannot begin with a digit, and they are case sensitive.

By adding these name attributes, not only is the form object created as part of a numeric array: the variable document.temperature is created to refer to the form. The Fahrenheit input field, which is inside the form, can be accessed through the variable document.temperature.fahrBox and the Celsius field through document.temperature.celsiusBox.

Hint: read the names from left to right: the celsiusBox inside the temperature form inside the document.

When someone fills in the form we created on the earlier page and clicks 'Convert', the onclick will call the JavaScript function. We need to get information out of the Fahrenheit field and put information into the Celsius field of the form.

As noted before, document.temperature.fahrBox refers to the input field as a whole. What you want is the value that the user typed in the field, and you access that through the value property of the field. current value inside of that field. To access this value you add the word "value" onto the end of our expression above.

document.temperature.fahrBox.value

This gives us the current value in that text field as a string. Again, reading from right to left, the expression accesses the value property of the fahrBox field in the temperature form in the document.

function convert_temp()
{
    var celsius;
    var fahr = document.temperature.fahrBox.value;

    // convert data to numbers
    fahr = parseFloat( fahr );

    // do conversion
    celsius = ((fahr - 32) / 9) * 5;

    // put result into appropriate box
    document.temperature.celsiusBox.value = celsius;
}

Because a field’s value is always a string, the function has to use the parseFloat() built-in function to ensure that you are working with a number. If you would like to have just the integer part, use parseInt(). You must use one of these functions; otherwise the number will be treated as a string!

Look at the last line in the function. Read from right to left, it says to put the celsius variable into the value of the celsiusBox field of the temperature form of the document. The value is a string, but you don’t have to do any conversion—numbers are automatically “promoted” to strings.

CIT041J Lecture Notes - Forms

Try it and Find Out!