How To Set Value Of Input Field In Javascript
Modify Input Value in JavaScript
- Change the Input Value Using the
valueHolding in JavaScript - Change the Input Value Using the
setAttribute()Office in JavaScript
This tutorial will discuss changing the input value using the value property or the setAttribute() function in JavaScript.
Alter the Input Value Using the value Property in JavaScript
We use an input tag to become input from a user, and we can use the value property to alter the input value. First of all, we need to get the chemical element whose value we want to change using its id or name, and so we can utilize the value belongings to set its value to our desired value. To go an element in JavaScript, we can use the getElementById() or the querySelector() function. For example, allow's make a course with input and requite it an id to get the element in JavaScript using the getElementById() and set its value using the value property. See the lawmaking beneath.
<!DOCTYPE html> <html> <head></head> <torso> <form> <input type="text" id= "123" proper name="ABC" value="Some Value"> </class> </body> <script type="text/javascript"> var Myelement = certificate.getElementById("123"); console.log(Myelement.value); Myelement.value = "New value"; console.log(Myelement.value); </script> </html> Output:
Some Value New value In the above lawmaking, we used the certificate.getElementById() function to get the element using its id, and on the next line, we printed the current input value using the console.log() function. After that, we used the value holding to set the input value to our desired value, and afterward that, nosotros printed the new value on the panel. You tin can also utilise the querySelector() role to select the element whose input value yous want to change. For example, let's repeat the above case using the querySelector() function. See the code below.
<!DOCTYPE html> <html> <head></head> <body> <class> <input type="text" id= "123" proper name="ABC" value="Some Value"> </course> </body> <script type="text/javascript"> var Myelement = document.querySelector('input[proper name="ABC"]'); console.log(Myelement.value); Myelement.value = "New value"; console.log(Myelement.value); </script> </html> Output:
Some Value New value In the above code, we used the querySelector() function to get the chemical element.
Change the Input Value Using the setAttribute() Part in JavaScript
We can also use the setAttribute() function instead of the value property to gear up the input value. Nosotros can also employ the forms() office instead of the getElementById() or querySelector() function to go the element using the form name and input name. For example, let's repeat the to a higher place example with the setAttribute() and froms() function. Meet the code below.
<!DOCTYPE html> <html> <head></head> <torso> <grade name="FormABC"> <input type="text" id= "123" name="ABC" value="Some Value"> </course> </torso> <script blazon="text/javascript"> var Myelement = document.forms['FormABC']['ABC']; console.log(Myelement.value); Myelement.setAttribute('value','New value'); panel.log(Myelement.value); </script> </html> Output:
Some Value New value As you can see, the output of all these methods is the same, so y'all can use whatever method you similar depending on your requirements.
Write for usa
DelftStack articles are written by software geeks like you. If you also would like to contribute to DelftStack past writing paid articles, y'all tin check the write for united states of america page.
Related Article - JavaScript Input
Source: https://www.delftstack.com/howto/javascript/change-input-value-javascript/
0 Response to "How To Set Value Of Input Field In Javascript"
Post a Comment