How would you set the default value of a form <input>
text field in JavaScript?
This is one way of doing it:
document.getElementById("nameofid").value = "My value";
I use 'setAttribute' function:
<input type="text" id="example"> // Setup text field
<script type="text/javascript">
document.getElementById("example").setAttribute('value','My default value');
</script>
value
should be accessed directly using dot notation: developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute you only use set/getAttribute to deal with the original value. After DOM is loaded, .value
represents the actual working value of the element.
setAttribute
. My problem was changing value of an input through a function call, change last changed inputs too.
if your form contains an input field like
<input type='text' id='id1' />
then you can write the code in javascript as given below to set its value as
document.getElementById('id1').value='text to be displayed' ;
If you are using multiple forms, you can use:
<form name='myForm'>
<input type='text' name='name' value=''>
</form>
<script type="text/javascript">
document.forms['myForm']['name'].value = "New value";
</script>
2021 Answer
Instead of using document.getElementById()
you can now use document.querySelector()
for different cases
more info from another StackOverflow answer:
querySelector lets you find elements with rules that can't be expressed with getElementById and getElementsByClassName
EXAMPLE:
document.querySelector('input[name="myInput"]').value = 'Whatever you want!';
or
let myInput = document.querySelector('input[name="myInput"]');
myInput.value = 'Whatever you want!';
Test:
document.querySelector('input[name="myInput"]').value = 'Whatever you want!';
document.querySelector("#name").value='foo'
works with id
which is widely used.
querySelector
can have multiple rules. Your comment is helpful! I will upvote it but I wouldn't post a new answer because it is the same
Try out these.
document.getElementById("current").value = 12
// or
var current = document.getElementById("current");
current.value = 12
The answer is really simple
// Your HTML text field
<input type="text" name="name" id="txt">
//Your javascript
<script type="text/javascript">
document.getElementById("txt").value = "My default value";
</script>
Or if you want to avoid JavaScript entirely: You can define it just using HTML
<input type="text" name="name" id="txt" value="My default value">
value
attribute ...
<input id="a_name" type="text" />
Here is the solution using jQuery
:
$(document).ready(function(){
$('#a_name').val('something');
});
Or, using JavaScript
:
document.getElementById("a_name").value = "Something";
Happy coding :)
The simple answer is not in Javascript the simplest way to get the placeholder is through the place holder attribute
<input type="text" name="text_box_1" placeholder="My Default Value" />
document.getElementById("fieldId").value = "Value";
or
document.forms['formId']['fieldId'].value = "Value";
or
document.getElementById("fieldId").setAttribute('value','Value');
It's simple; An example is:
<input type="text" id="example"> // Setup text field
<script type="text/javascript">
var elem = document.getElementById("example"); // Get text field
elem.value = "My default value"; // Change field
</script>
This does works for me
//HTML
<div id="mytext">Some Text Value</div>
// JavaScript
document.getElementById("mytext").value = "My value";
If the field for whatever reason only has a name attribute and nothing else, you can try this:
document.getElementsByName("INPUTNAME")[0].value = "TEXT HERE";
<form>
<input type="number" id="inputid" value="2000" />
</form>
<script>
var form_value = document.getElementById("inputid").value;
</script>
You can also change the default value to a new value
<script>
document.getElementById("inputid").value = 4000;
</script>
This part you use in html
<input id="latitude" type="text" name="latitude"></p>
This is javaScript:
<script>
document.getElementById("latitude").value=25;
</script>
You can also try:
document.getElementById('theID').value = 'new value';
Direct access
If you use ID then you have direct access to input in JS global scope
myInput.value = 'default_value'
The following code work perfectly well:
var $div = ('#js-div-hour input');
$div.attr('value','2022/01/10');
Success story sharing
.value = ...
does change the current value only. Resetting the form (with<input type="reset" />
for example) will change the value back to the original one. In contrast,setAttribute("value", ...)
works properly in Firefox and Chrome. The default value is changed but the actual value is only changed if the user have not modified it already. However,setAttribute
is not recommended because of browser compatibility. Is there any other possibility?