JavaScript® 24-Hour Trainer

Chapter 28. Scripting Text Elements

If buttons are the most common form control, text-based input elements are a close second. There are several types of text elements, making them the best tool for inputting data to submit to your web application. They are:

• The textbox

• The password textbox

• The hidden textbox

• The Multiline textbox

The differences between the textbox types are minimal. Let's start with the simple textbox.

THE TEXTBOX

You create a textbox with the <input/> element and set its type attribute to the value of text, like this:

<input type="text" name="textBox" />

This HTML creates a textbox named textBox. To access it in a form, you get the element either by its id attribute (which this example does not have), or through the form it belongs to. Assuming this textbox resides in a form called theForm, the following code gets a reference to this textbox:

var txtBox = document.theForm.textBox;

When you create a textbox, you can set its value attribute to contain a text value. The value attribute dictates what appears inside the textbox when the browser renders it. This attribute maps directly to the value property, so you can get or set the text in a textbox by using the value property like this:

txtBox.value = "Some new data";

The contents of the value property are always a string, even if numeric characters are entered. So when you expect a textbox to be used for numeric data, it's always a good idea to convert the textbox's value to a number by using the parseInt() or parseFloat() ...