Set the value of an input field

JavascriptHtmlFormsInputHtml Input

Javascript Problem Overview


How would you set the default value of a form <input> text field in JavaScript?

Javascript Solutions


Solution 1 - Javascript

This is one way of doing it:

document.getElementById("nameofid").value = "My value";

Solution 2 - Javascript

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>

Solution 3 - Javascript

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' ; 

Solution 4 - Javascript

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>

Solution 5 - Javascript

Try out these.

document.getElementById("current").value = 12

// or

var current = document.getElementById("current");
current.value = 12

Solution 6 - Javascript

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!';

<input type="text" name="myInput" id="myInput" placeholder="Your text">

Solution 7 - Javascript

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">

Solution 8 - Javascript

<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 :)

Solution 9 - Javascript

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" />

Solution 10 - Javascript

document.getElementById("fieldId").value = "Value";

or

document.forms['formId']['fieldId'].value = "Value";

or

document.getElementById("fieldId").setAttribute('value','Value');

Solution 11 - Javascript

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>

Solution 12 - Javascript

This does works for me

//HTML
<div id="mytext">Some Text Value</div>

// JavaScript
document.getElementById("mytext").value = "My value";

Solution 13 - Javascript

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";

Solution 14 - Javascript

<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>

Solution 15 - Javascript

This part you use in html

<input id="latitude" type="text" name="latitude"></p>

This is javaScript:

<script>
document.getElementById("latitude").value=25;
</script>

Solution 16 - Javascript

You can also try:

document.getElementById('theID').value = 'new value';

Solution 17 - Javascript

Direct access

If you use ID then you have direct access to input in JS global scope

myInput.value = 'default_value'

<input id="myInput">

Solution 18 - Javascript

The following code work perfectly well:

var $div = ('#js-div-hour input');
$div.attr('value','2022/01/10');

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSebastianOppermanView Question on Stackoverflow
Solution 1 - JavascriptJamesView Answer on Stackoverflow
Solution 2 - JavascriptPepe AmoedoView Answer on Stackoverflow
Solution 3 - JavascriptVaradaView Answer on Stackoverflow
Solution 4 - JavascriptDavid CaissyView Answer on Stackoverflow
Solution 5 - JavascriptdallinchaseView Answer on Stackoverflow
Solution 6 - JavascriptRunsisView Answer on Stackoverflow
Solution 7 - Javascriptphp-coderView Answer on Stackoverflow
Solution 8 - JavascriptRashed RahatView Answer on Stackoverflow
Solution 9 - JavascriptRWolfeView Answer on Stackoverflow
Solution 10 - JavascriptArun KarnawatView Answer on Stackoverflow
Solution 11 - JavascriptultimatetechieView Answer on Stackoverflow
Solution 12 - JavascriptMD SHAYONView Answer on Stackoverflow
Solution 13 - JavascriptCake PrincessView Answer on Stackoverflow
Solution 14 - JavascriptTobilobaView Answer on Stackoverflow
Solution 15 - JavascriptAmranur RahmanView Answer on Stackoverflow
Solution 16 - JavascriptBogdan MatesView Answer on Stackoverflow
Solution 17 - JavascriptKamil KiełczewskiView Answer on Stackoverflow
Solution 18 - Javascriptmahmoud aoataView Answer on Stackoverflow