JavaScript input value set

JavaScript set input field value

In this tutorial we will learn how to Set input field value with JavaScript. We can use JavaScript value Property and setAttribute() method to set the value of HTML input tag.

value property

value property sets or returns the value of the input field.

In this example value property is used to set the value of input tag.

setAttribute() method

setAttribute() method sets the value of the attribute of the selected HTML element.

We can also use setAttribute() method to set the value of input field.

HTML Code

HTML Code is given below, in this code we have a input field and a button tag with onclick event.

      
 
Set Input Value   

JavaScript Code

Take a look at the JavaScript code, In this code user defined function setInputValue() will set the value of input field.

getElementById() method is used to select the input tag.

value property gives it a new value.

Same code but with setAttribute() method.

Demo

Video Tutorial

Watch video tutorial on How To set input field value using JavaScript.

Источник

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 Set the Value of an Input Field with JavaScript?

One way to set the value of an input field with JavaScript is to set the value property of the input element.

For instance, we can write the following HTML:

Then we can set the value property of the input by writing:

document.getElementById("mytext").value = "My value"; 

Call the setAttribute Method

Also, we can call the setAttribute method to set the value attribute of the input element.

For instance, we can write:

document.getElementById("mytext").setAttribute('value', 'My value'); 

We call setAttribute with the attribute name and value to set the value attribute to ‘My value’ .

Setting the value Property of an Input in a Form

We can also get the input element by using the document.forms object with the name attribute value of the form and the name attribute value of the input element.

For example, we can write the following HTML:

Then we can use it by writing:

document.forms.myForm.name.value = "New value"; 

The form name value comes first.

Then the name value of the input element comes after it.

document.querySelector

We can use the document.querySelector method to select the input.

For instance, we can write the following HTML:

document.querySelector('input[name="name"]').value = "New value"; 

to get the element with querySelector .

We select the input with the name attribute by putting the name key with its value in the square brackets.

Источник

Input Text value Property

The value property sets or returns the value of the value attribute of a text field.

The value property contains the default value OR the value a user types in (or a value set by a script).

Browser Support

Syntax

Return the value property:

Property Values

Technical Details

More Examples

Example

Get the value of a text field:

Example

var at = document.getElementById(«email»).value.indexOf(«@»);
var age = document.getElementById(«age»).value;
var fname = document.getElementById(«fname»).value;
submitOK = «true»;

if (fname.length > 10) alert(«The name may have no more than 10 characters»);
submitOK = «false»;
>

if (isNaN(age) || age < 1 || age >100) alert(«The age must be a number between 1 and 100»);
submitOK = «false»;
>

if (at == -1) alert(«Not a valid e-mail!»);
submitOK = «false»;
>

if (submitOK == «false») return false;
>

Example

var mylist = document.getElementById(«myList»);
document.getElementById(«favorite»).value = mylist.options[mylist.selectedIndex].text;

Example

var no = document.getElementById(«no»);
var option = no.options[no.selectedIndex].text;
var txt = document.getElementById(«result»).value;
txt = txt + option;
document.getElementById(«result»).value = txt;

Example

An example that shows the difference between the defaultValue and value property:

Источник