Java Reference
In-Depth Information
These buttons have special purposes, which are not related to script.
When the Submit button is clicked, the form data from the form that the button is inside gets sent to the
server automatically, without the need for any script.
When the Reset button is clicked, all the elements in a form are cleared and returned to their default
values (the values they had when the page was fi rst loaded).
The Submit and Reset buttons have corresponding objects called Submit and Reset, which have
exactly the same properties, methods, and events as a standard Button object.
Text Elements
The standard text element enables users to enter a single line of text. This information can then be used
in JavaScript code or submitted to a server for server-side processing.
The Text Box
A text box is created by means of the <input/> element, much as the button is, but with the type attri-
bute set to text. Again, you can choose not to include the value attribute, but if you do include it this
value will appear inside the text box when the page is loaded.
In the following example the <input/> element has two additional attributes, size and maxlength.
The size attribute determines how many characters wide the text box is, and maxlength determines
the maximum number of characters the user can enter in the box. Both attributes are optional and use
defaults determined by the browser.
For example, to create a text box 10 characters wide, with a maximum character length of 15, and ini-
tially containing the words Hello World, your <input/> element would be as follows:
<input type=”text” name=”myTextBox” size=”10” maxlength=”15” value=”Hello World” />
The Text object that this element creates has a value property, which you can use in your scripts to set
or read the text contained inside the text box. In addition to the common properties and methods we
discussed earlier, the Text object also has the select() method, which selects or highlights all the text
inside the text box. This may be used if the user has entered an invalid value, and you can set the focus
to the text box and select the text inside it. This then puts the user's cursor in the right place to cor-
rect the data and makes it very clear to the user where the invalid data is. The value property of Text
objects always returns a string data type, even if number characters are being entered. If you use the
value as a number, JavaScript normally does a conversion from a string data type to a number data type
for you, but this is not always the case. For example, JavaScript won't do the conversion if the operation
you're performing is valid for a string. If you have a form with two text boxes and you add the values
returned from these, JavaScript concatenates rather than adds the two values, so 1 plus 1 will be 11 and
not 2. To fi x this, you need to convert all the values involved to a numerical data type, for example by
using parseInt() or parseFloat() or Number(). However, if you subtract the two values, an opera-
tion only valid for numbers, JavaScript says “Aha, this can only be done with numbers, so I'll convert
the values to a number data type.” Therefore, 1 minus 1 will be returned as 0 without your having to
use parseInt() or parseFloat(). This is a tricky bug to spot, so it's best to get into the habit of con-
verting explicitly to avoid problems later.
