reading input field numbers

reading input field numbers


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:

  1. How can I obtain input field values?
  2. 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.



input field


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>function increase (){ var temp = parseInt (document . apple . banana . value); if (isNaN (temp)) return; document . apple . banana . value = temp * 2;} </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:

Enter an integer and push the button to double it.

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, ““.

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, ““.

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

Share the Post:
Heading photo, Metadata.

What is Metadata?

What is metadata? Well, It’s an odd concept to wrap your head around. Metadata is essentially the secondary layer of data that tracks details about the “regular” data. The regular

XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

AI is revolutionizing fraud detection

How AI is Revolutionizing Fraud Detection

Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

AI innovation

Companies Leading AI Innovation in 2023

Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

data fivetran pricing

Fivetran Pricing Explained

One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

kubernetes logging

Kubernetes Logging: What You Need to Know

Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes