Set the Value of an Input Field in JavaScript Last Updated : 09 Jan, 2025 Comments Improve Suggest changes 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 an Input Field on Button Click in JavaScript ? JavaScript allows us to dynamically add an input field upon button click. We can use the below approaches for adding an input field on Button Click in JavaScript. Table of Content Using DOM ManipulationUsing Template Literal and InnerHTMLUsing DOM ManipulationDOM manipulation is used to dynamically 2 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 How to force Input field to enter numbers only using JavaScript ? We are going to learn how can we force the Input field to enter numbers only using JavaScript. Below are the approaches to force input field force numbers using JavaScript:Table of ContentBy using ASCII ValueBy using replace(), isNan() functionBy using ASCII ValueIn this approach, we are going to us 3 min read How to set the input field value dynamically in AngularJS ? Given an input field and the task is to set the input field value dynamically with the help of AngularJS.Approach: A value is being set to the input field despite the user enter something or not. ng-click event is used to call a function that sets the value to 'This is GeeksForGeeks' with the help o 2 min read JavaScript- Find the HTML Label Associated with a Given Input Element in JS When working with forms in HTML, labels are commonly used to provide text descriptions for form elements, such as text boxes, checkboxes, and radio buttons.These labels are typically associated with form controls using the for attribute, which links the label to an input element with the correspondi 2 min read How to Add an ID to Element in JavaScript ? In JavaScript, the ID is the unique identifier through which the elements can be identified and manipulated if required. We can add an ID to an element in JavaScript using various approaches that are explored in this article with practical demonstration. Below are the possible approaches: Table of C 2 min read Like