CIT041J Index > Lecture Notes - Forms

CIT041J Lecture Notes - Forms

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.)

F = C  

The HTML to create the above form is:

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

When the browser displays the form, it automatically builds objects that correspond to the form, each of the input fields, and the button. These are all accessible through various document properties. The document.forms array is a list of all the forms in the document. So, you could access the first input element in the preceding form and obtain its current value as:

var obj = document.forms[0].elements[0];
var fahrTemp = obj.value;

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. The reason you use name= instead of id= is because:

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 and clicks 'Convert', the onclick will call the JavaScript function. You then 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 you 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.

Here is the convert_temp() function

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.

Try it and Find Out!

Here’s an exercise that you can try to see if you can make forms work.