Set the Value of an Input Field in JavaScript Last Updated : 09 Jan, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report We will learn how you can set the value of an input field in JavaScript. We will set user input to the placeholder value of the input field using JavaScript.Below are the approaches to set the value of an input field in JavaScript:Table of ContentBy using the innerHTML propertyBy using setAttribute MethodBy using the innerHTML propertyIn this approach, we are going to call a function when the user clicks the button.The click event will occur and a function will be invoked.The function will get the input value from the input field and add that value using the "innerHTML" property provided by JavaScript.At last, that value will be displayed on the screen.Example: This example is the implementation of the above-explained approach. 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> let el_down = document.getElementById("GFG_DOWN"); let 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 fieldBy using setAttribute MethodIn this approach, we are going to call a function when the user clicks the button.The click event will occur and a function will be invoked.The function will get the input value from the input field and set that value using the setAttribute() method.And add that value using the "innerHTML" property provided by JavaScript.At last, that value will be displayed on the screen.Example: This example is the implementation of the above-explained approach. 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> let el_down = document.getElementById("GFG_DOWN"); let 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 Comment More infoAdvertise with us Next Article Set the Value of an Input Field in JavaScript P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies Similar Reads Get the Value of Text Input Field using JavaScript Getting the value of a text input field using JavaScript refers to accessing the current content entered by a user in an input element, such as <input> or <textarea>, by utilizing the value property. This allows for dynamic interaction and data manipulation in web forms.Syntax inputField 2 min read JQuery Set the Value of an Input Text Field Set the value of an input text field in jQuery is useful while working with forms. It is used to add new value to the input text field. In jQuery, there are various methods to set the value of input text fields, these are - val(), prop(), and attr(). These method offers unique capabilities for setti 3 min read How to take user input in JavaScript? Interacting with users is the best way to create engaging and dynamic web applications. Taking user input allows your applications to be interactive and responsive. Here we will see the approach to take user input in JavaScript, specifically using the prompt method, which is perfect for beginners.Ap 3 min read How to add readonly attribute to an input tag in JavaScript ? Use the setAttribute() Method to add the read-only attribute to the form input field using JavaScript. setAttribute() Method This method adds the defined attribute to an element and gives it the defined value. If the specified attribute is already present, then the value is being set or changed. Syn 2 min read How to Get the Value of an Input Text Box using jQuery? When working with forms or interactive web pages, sometimes need to get the values entered into the input fields. This article provide a complete guide on how to get the value o an input text box using jQuery. Below are the different approaches to get the value of an input text box using jQuery:Get 2 min read Like