Set the value of an input field in JavaScript

0 0 2 minutes read

Sometimes we need to set a default value of the <input> element, This example explains methods to do so.

Text Value Property: This property set/return the value of value attribute of a text field. The value property contains the default value, the value a user types or a value set by a script.

Syntax:

Return the value property:

textObject.value

Set the value property:

textObject.value = text

Property Values:

text: It specifies the value of the input text field.
attributeValue: This parameter is required. It specifies the value of the attribute to add.

JavaScript setAttribute() Method: This method adds the specified attribute to an element and sets its specified value. If the attribute is already present, then it’s value is set/changed.

Syntax:

element.setAttribute(attributeName, attributeValue)

Parameters:

attributeName: This parameter is required. It specifies the name of the attribute to add.
attributeValue: This parameter is required. It specifies the value of the attribute to add.

Example-1:This example sets the value of the input element to ‘textValue’ by Text Value property.

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
       Set the value of an input field. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1> 
    <input type='text' id='id1' /> 
    <br> 
    <br> 
    <button onclick="gfg_Run()"> 
        click to set 
    </button> 
    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px; 
                            font-weight: bold;"> 
    </p> 
    <script> 
        var el_down = document.getElementById("GFG_DOWN"); 
        var inputF = document.getElementById("id1"); 
  
        function gfg_Run() { 
            inputF.value = "textValue"; 
            el_down.innerHTML = 
                "Value = " + "'" + inputF.value + "'"; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Set the value of an input field

Example-2: This example sets the value of the input element to ‘defaultValue’ by setAttribute method.

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Set the value of an input field. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1> 
    <input type='text' id='id1' /> 
    <br> 
    <br> 
    <button onclick="gfg_Run()"> 
        click to set 
    </button> 
    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px; 
                            font-weight: bold;"> 
    </p> 
    <script> 
        var el_down = document.getElementById("GFG_DOWN"); 
        var inputF = document.getElementById("id1"); 
  
        function gfg_Run() { 
            inputF.setAttribute('value', 'defaultValue'); 
            el_down.innerHTML = 
                "Value = " + "'" + inputF.value + "'"; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Set the value of an input field

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.