How to Assign Value to Textbox Using JavaScript

Sometimes, you may need to set a textbox value based on any event. You can do this by adding an input textbox element in the HTML file and setting its attribute value based on the requirement. JavaScript has predefined methods that can be useful for the stated purpose.

This post will define the procedure for assigning value to the textbox using JavaScript.

How to Assign Value to Textbox Using JavaScript?

For assigning value to the textbox, use the following methods:

Using setAttribute() method
Using Text Value property

Let’s look at the working of these methods separately!

Method 1: Assign Value to Textbox Using setAttribute() Method

The “setAttribute()” method is used to assign a value to the textbox. It is utilized to add or set an attribute to a certain element and give it a value. This method takes two parameters as an argument, and both are mandatory.

Syntax

Follow the below-mentioned syntax for setAttribute() method:

setAttribute(attributeName, attributeValue);

Here, “attributeValue” is the value of the attribute whose name is specified.

Example

We will first create a heading and an input field with the default “Text” placeholder value. Next, add a button that will invoke the “myFunction()” method when it is clicked:

<h5>Click the button to see the default value of the text field.</h5>

<input type="text" id="myText" placeholder="Text">

<button onclick="myFunction()">Click</button>

In JS file, define a function named “myFunction()” and access the textbox using “getElementbyId()” method and then set the value with the help of “setAttribute()” method:

function myFunction() {

document.getElementById("myText").setAttribute('value', 'LinuxHint');

}

It can be seen from the output that when the button is clicked, the value of the textbox is set as “LinuxHint”:

Let’s see the next procedure for assigning value to the textbox.

Method 2: Assign Value to Textbox Using Text Value Property

There is another approach for assigning value to the textbox, which is the “value” property of the text. In this approach, you only have to assign the value to the textbox using the value property.

Syntax

Use the following syntax for assigning value to a textbox using the value property of the text element:

value = "Text";

Example

Here, we will assign the value to the already created textbox in the previous example. To do so, access the textbox in the myFunction() and then, assign the required value to the textbox using the “value” property:

function myFunction() {

document.getElementById("myText").value = "LinuxHint";

}

As you can see the output successfully, assign the value to the textbox:

We have gathered the simplest approaches for assigning value to the textbox using JavaScript.

Conclusion

For assigning value to the textbox using JavaScript, you can use the JavaScript predefined method called setAttribute() method or the value property of the text element. Both of these approaches work efficiently for assigning value to the textbox. You can select one of them as per your requirement. In this post, we have discussed the approaches for assigning the value to the textbox using JavaScript with detailed examples.

How to Assign Value to Textbox Using JavaScript