Set the value of an input field in JavaScript - GeeksforGeeks

21 Jul, 2021
Sometimes we need to set a default value of the <input> element, This example explains methods to do so.
Text Value PropertyThis 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.
Return the value property:textObject.value

textObject.value

Set the value property:textObject.value = text

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 methodThis 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.
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.
<!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>
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.
<!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>
Output:
Before clicking on the button:
After clicking on the button:
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.
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
How to Use the JavaScript Fetch API to Get Data?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?