Set the value of an input field in JavaScript

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 input text field.
    • attributeValue:This parameter is required. It specifies the value of the attribute to add.
  • setAttribute method
    This method adds the specified attribute to an element, and set it’s specified value.
    If the attribute 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JavaScript 
      | 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>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JavaScript 
      | 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>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.