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.
Table of Contents
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.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript input value set</title>
</head>
<body>
<input type="text" id="input">
<br><br>
<button onclick="setInputValue()">Set Input Value</button>
<script src="script.js"></script>
</body>
</html>
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.
<script>
function setInputValue()
{
// using value property
var input = document.getElementById('input');
input.value = "New Value";
}
</script>
Same code but with setAttribute() method.
<script>
function setInputValue()
{
// using setAttribute() method
var input = document.getElementById('input');
input.setAttribute("value","New Value");
}
</script>
Demo
Video Tutorial
Watch video tutorial on How To set input field value using JavaScript.