Question:
Answer:
JavaScript can be used to access values in web form input fields. This is possible because JavaScript treats input fields as objects with several properties. One of these properties is a string object called “value“.
The question “How can I obtain input field numbers?” can be posed as a two-part question:
- How can I obtain input field values?
- How can I make sure input field values are treated as numbers?
Let’s discuss the answers to each of these sub-questions.
How can I obtain input field values?
In order to arbitrarily access input field values, the JavaScript programmer must understand the complex object-property structure of web documents.
document
|
Web documents are represented in JavaScript by the “document” object. This object has many properties, some of which may be objects corresponding to forms displayed in the document. Form objects, in turn, also have properties, some of which may be objects corresponding to input fields in the form. As you might expect, input fields also have properties. One of these properties is a string object called “value“.
To illustrate this better, let’s consider the following code:
<html><head> <script defer src="data:text/javascript;base64,ZnVuY3Rpb24gaW5jcmVhc2UgKCl7ICAgICAgICB2YXIgdGVtcCA9IHBhcnNlSW50IChkb2N1bWVudCAuIGFwcGxlIC4gYmFuYW5hIC4gdmFsdWUpOyAgICAgICAgaWYgKGlzTmFOICh0ZW1wKSkgICAgICAgICAgICAgICAgcmV0dXJuOyAgICAgICAgZG9jdW1lbnQgLiBhcHBsZSAuIGJhbmFuYSAuIHZhbHVlID0gdGVtcCAqIDI7fSAg"></script> </head><body></p><form name=apple> Enter an integer and push the button to double it.</p><p> <input type=text name=banana> <input type=button value="increase" onClick="increase ();"></form><p></body></html>
On your browser, this code produces a document with the following appearance:
This JavaScript document allows the user to enter a value in the text field and and double it by pushing the button. When the text field does not contain a valid numeric string, pushing the button has no effect.
The value of the input field in this document can be accessed through the object called “document“. Notice that in the document is a form, which has carefully been given the name, “apple“. Because this form has a name, we can directly refer to the form object as a property of the document object, namely, “document.apple“.
The text field in the form also has a name, “banana“. Through this name, we can refer to the text field object as a property of the form object, namely, “document.apple.banana“.
Finally, the text field has an object property called “value”, which is a string object.
Thus, the value of the text field can be accessed through the object-property path “document.apple.banana.value“. This expression will work in JavaScript code placed anywhere in the document. However, if the code is part of an event handler for the text field, then the shortcut-name “this.value“, or even just “value“, can also be used to mean the same thing.
How can I make sure input field values are treated as numbers?
I mentioned earlier that the value property of an input field object is a string. Thus, in order to treat value like a number, it must first be converted to an integer through the parseInt function.
The function parseInt, in its simplest form, accepts a string as input and returns the base-10 number represented by the string. Thus, in the sample code given above, the value of the input field is obtained through the expression
var temp = parseInt (document . apple . banana . value);
parseInt fails when the string does not contain digits that can be converted into a number. When this happens, it returns a special value called “NaN“, which means “Not a Number.” Thus, whenever parseInt is used to convert a string to a number, a special check should be made to determine whether the value returned is a legitimate number or a NaN.
The JavaScript language has a function called isNaN that serves this purpose. isNaN accepts a single parameter of any type and returns the boolean value true if the parameter is a NaN, false otherwise. In the above example, we check the value obtained from parseInt with the following statement:
if (isNaN (temp)) return;
This makes it possible for our code to avoid performing arithmetic on non-numeric strings.
