Getting input text in javascript

How to Get the Value of Text Input Field Using JavaScript

In this tutorial, you will learn about getting the value of the text input field using JavaScript. There are several methods are used to get an input textbox value without wrapping the input element inside a form element. Let’s show you each of them separately and point the differences.

The first method uses document.getElementById(‘textboxId’).value to get the value of the box:

document.getElementById("inputId").value;

html> html> head> title>Title of the Document title> head> body> input type="text" placeholder="Type " id="inputId"> button type="button" onclick="getInputValue();">Get Value button> script> function getInputValue( ) < // Selecting the input element and get its value let inputVal = document.getElementById("inputId").value; // Displaying the value alert(inputVal); > script> body> html>

You can also use the document.getElementsByClassName(‘className’)[wholeNumber].value method which returns a Live HTMLCollection. HTMLCollection is a set of HTM/XML elements:

document.getElementsByClassName("inputClass")[0].value;

html> html> head> title>Title of the Document title> head> body> input type="text" placeholder="Type " id="inputId" class="inputClass"> button type="button" onclick="getInputValue();">Get Value button> script> function getInputValue( ) < // Selecting the input element and get its value let inputVal = document.getElementsByClassName("inputClass")[0].value; // Displaying the value alert(inputVal); > script> body> html>

Or you can use document.getElementsByTagName(‘tagName’)[wholeNumber].value which is also returns a Live HTMLCollection:

document.getElementsByTagName("input")[0].value;

Live HTMLCollection only includes the matching elements (e.g. class name or tag name) and does not include text nodes.

Another method is document.getElementsByName(‘name’)[wholeNumber].value which returns a live NodeList which is a collection of nodes. It includes any HTM/XML element, and text content of a element:

document.getElementsByName("searchText")[0].value;

Use the powerful document.querySelector(‘selector’).value which uses a CSS selector to select the element:

document.querySelector('#searchText').value; // selected by id document.querySelector('.search_Field').value; // selected by class document.querySelector('input').value; // selected by tagname document.querySelector('[name="searchText"]').value; // selected by name

There is another method document.querySelectorAll(‘selector’)[wholeNumber].value which is the same as the preceding method, but returns all elements with that selector as a static Nodelist:

document.querySelectorAll('#searchText')[0].value; // selected by id document.querySelectorAll('.search_Field')[0].value; // selected by class document.querySelectorAll('input')[0].value; // selected by tagname document.querySelectorAll('[name="searchText"]')[0].value; // selected by name

Nodelist and HTMLCollection

The HTMLCollection represents a generic collection of elements in document order suggesting methods and properties to select from the list. The HTMLCollection in the HTML DOM is live, meaning when the document is changed it will be automatically updated. NodeList objects are collections of nodes returned by properties such as Node. There are two types of NodeList: live and static. It is static when any change in the DOM does not affect the content of the collection. And live when the changes in the DOM automatically update the collection. You can loop over the items in a NodeList using a for loop. Using for. in or for each. in is not recommended.

Источник

How to Get and Set Input Text Value in JavaScript

On most web pages, it is required to get the input text value from the users in order to enter correct data and ensure data security. For instance, you need to get, set or store some specific data to use it for further processing. In such cases, getting and setting input text value in JavaScript becomes very helpful for protecting data privacy.

This write-up will demonstrate the methods to get and set input text values in JavaScript.

How to Get and Set Input Text Value in JavaScript?

To get and set input text value in JavaScript, utilize:

• “getElementById()” method
• “getElementByClassName()” method
• “querySelector()” method

Go through each of the mentioned methods one by one!

Method 1: Get and Set Input Text Value in JavaScript Using document.getElementById() Method

The “getElementById()” method accesses an element with the specified Id. This method can be applied to access the ids of the input fields and buttons for getting and setting the text value.

Here, “elementID” refers to the specified Id of an element.

The below example explains the discussed concept.

Example
Firstly, include two input type fields and separate buttons for getting and setting the input text values with the “onclick” events which will access the specified functions:

Then, get the value of the input field with the help of the document.getElementById() method:

Now, declare a function named “getAndSetText()”. Here, fetch the input field with the “getText” id and pass the input value to the next input field having “setText” id:

function getAndSetText ( ) {
var setText = document. getElementById ( ‘getText’ ) . value ;
document. getElementById ( ‘setText’ ) . value = setText ;
}

Similarly, define a function named “getText()”. After that, get the input field with “getText” id and pass the particular value to the alert box for getting the input text value:

function getText ( ) {
var getText = document. getElementById ( ‘getText’ ) . value ;
alert ( getText ) ;
}

Method 2: Get and Set Input Text Value in JavaScript Using document.getElementByClassName() Method

The “getElementByClassName()” method accesses an element with the help of the specified class name. This method, similarly, can be applied to access the class of the input field and buttons for entering and setting the text value.

In the above syntax, the “classname” represents the class name of elements.

Example
Similar to the previous example, we will first access the first input field with the “getText” class name. Then, define a function named “getAndSetText()” and get the specified input field based on its class name and set the value in the next input field:

document. getElementByClassName ( ‘getText’ ) . value = «Input Here» ;
function getAndSetText ( )
{
var setText = document. getElementByClassName ( ‘getText’ ) . value ;
document. getElementById ( ‘setText’ ) . value = setText ;
}

Likewise, define a function named “getText()”, add the class name of the first input field and pass the particular value to the alert box to display the fetched value:

function getText ( ) {
var getText = document. getElementByClassName ( ‘getText’ ) . value ;
alert ( getText ) ;
}

This implementation will yield the following output:

Method 3: Get and Set Input Text Value in Javascript Using “document.querySelector()” Method

The “document.querySelector()” fetches the first element that matches the specified selector, and the addEventListener() method can add an event handler to the selected element. These methods can be applied to get the id of the input field and buttons and apply an event handler to them.

Here, “CSS selectors” refer to one or more CSS selectors.

Look at the following example.

Example
Firstly, include input types with their placeholder values and buttons for getting and setting the input text values:

Next, fetch the added input fields and buttons using the “document.querySelector()” method:

let buttonGet = document. querySelector ( ‘#get’ ) ;
let buttonSet = document. querySelector ( ‘#set’ ) ;
let getInput = document. querySelector ( ‘#input-get’ ) ;
let setInput = document. querySelector ( ‘#input-set’ ) ;
let result = document. querySelector ( ‘#result’ ) ;

Then, include an event handler named “click” for both buttons to get and set the values, respectively:

buttonGet. addEventListener ( ‘click’ , ( ) => {
result. innerText = getInput. value ;
} ) ;
buttonSet. addEventListener ( ‘click’ , ( ) => {
getInput. value = setInput. value ;
} ) ;

We have discussed the simplest methods for getting and setting input text value in JavaScript.

Conclusion

To get and set input text value in JavaScript, utilize the “document.getElementById()” method or the

“document.getElementByClassName()” method for accessing the specified input field and buttons based on their ids or class name and then set their values. Moreover, the “document.querySelector()” can also be utilized for getting and setting input text values in JavaScript. This blog explained the methods to get and set input text values in JavaScript.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

How to Get Input Value in JavaScript

JavaScript offers a variety of functionalities to create interactive interfaces. One can retrieve the value of any element using JavaScript methods. The input value can be printed somewhere on the web page or it can be obtained as an alert message. All this is possible with the help of JavaScript. Here, we will describe the JavaScript support to get the input value from any element. The following learning outcomes are expected:

How to Get Input Value in JavaScript

JavaScript provides two properties to get the input values by employing the getElementById, getElementsByClassName, and querySelector methods. These methods extract the string as well as the numerical value to display the user information. All the famous browsers support both of these properties. The value property returns the information of the user. Moreover, the property is useful for assigning any specific value for display in the browser window.

The syntax of these methods is stated below.

Syntax of getElementById

Syntax of getElementsByClassName

Syntax of querySelector

The description of the above parameters is as below:

• textId: denotes the id of an element.
• text_message: represents the message to be displayed.
• clName: specify the name of the class.
• Id1: represents the id or class of an HTML element.

Example 1: Get the Input Value Using the getElementbyId() Method

Another example is considered for getting the input value in JavaScript.

The HTML code gets the input value “Welcome to JavaScript” by pressing the “Display Button”. The button is attached with the Display_fn() method.

function Display_fn ( ) {
var a = document. getElementById ( «mtxt» ) . value ;
document. getElementById ( «demo» ) . innerHTML = a ;
}

A method Display_fn() is employed to retrieve the value of text in the HTML file by getElementById.

Example 2: Get the Input Value Using the getElementsbyClassName() Method

An example is considered to get the numeric value from the input field in JavaScript.

In this code, the description is as below:

• The class inpCls is used to input the numeric number.
• After that, a button is attached that is associated with the getInpVal() method.
• In the end, a JavaScript file test.js is linked by assigning the source src variable.

function getInpVal ( ) {
let inpVal = document. getElementsByClassName ( «inpCls» ) [ 0 ] . value ;
alert ( inpVal ) ; }

• A method getInpVal() is used to extract the value from the HTML file.
• The extraction is performed by getElementByClassName(“inpCls”)[0].value.
• In the end, an alert message is generated by passing the inpVal variable.

The output shows that the user first inputs any number. After that, an alert box is generated by pressing the “Get Numerical Value” button.

Example 3: Get Input Value Using querySelector() Method

Another example is considered to get the value using the querySelector() method.

In this code, the description is as follows:

• Firstly, a text box and a button are attached with and tags respectively.
• The button is associated with the getValueInput() method.
• In this method, querySelector() is employed to extract the value of the text box and display it using val1.

The output shows the message “JavaScript” by pressing the button in the browser.

Conclusion

The getElementById, getElementsByClassName, and querySelector() methods are utilized to get the input value in JavaScript. The first two methods retrieve the elements using the id and class name. While the third method can get the elements using an id as well as a class name. Here, you have learned to use all three of these methods to get input values in JavaScript.

About the author

Syed Minhal Abbas

I hold a master’s degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.

Источник