Develop Reference

How to bind the value in html from JS? [duplicate]

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():
<input type="text" id="example"> // Setup text field
<script type="text/javascript">
document.getElementById("example").setAttribute('value','My default value');
</script>

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

2023 Answer
Instead of using document.getElementById() you can now use document.querySelector() for different cases
more info from another Stack Overflow 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">

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>

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

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

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'
<input id="myInput">

The following code work perfectly well:
var $div = ('#js-div-hour input');
$div.attr('value','2022/01/10');

Javascript concat clearing input fields

function js() {
document.getElementById("example").innerHTML = document.getElementById("example").innerHTML+"<input type=\"text\" name=\"name\" />";
}
<div id="example">
<input type="text" name="name[]" />
</div>
<button type="button" onclick="js();">Click</button>
I have a form, which need variable number of input types.
<form action="" method="">
[...]
<div id="mezok">
<div id="input_id">
<input type="text" name="name" />
</div>
</div>
[...]
</form>
I add and remove further inputs (along with their divs!) via an ajax call. Javascript calls a php which generates a new input_id div, and then concatenates to the rest of the div id="mezok". Adding and removing inputs are fine as long as everything is empty. However, when I add a new div when there is something in the input, it clears the rest of the inputs.
document.getElementById("mezok").innerHTML = document.getElementById("mezok").innerHTML+http.responseText;
document.getElementById("mezok").innerHTML += http.responseText;
document.getElementById("mezok").innerHTML.concat(http.responseText);
(The last one is not working at all...)
TL;DR: concat input to input, values of inputs disappear. :'(

Don't use innerHTML. What you are doing is redrawing the entire container contents, deleting existent inputs and creating new inputs each time. My experience says that when you are accessing innerHTML, recheck your code as you are probably doing something weird.
What you have to do is to create inputs individually and append them to the container, without touching the rest of the inputs. Is like appending elements to an array.
This way the code is more self-explanatory, and better, is way more performant:
function js() {
var input = document.createElement("input"); // Create a new input element. Is like "<input>".
input.setAttribute("type", "text"); // Set the 'type' attribute to 'text'. Is like having '<input type="text">'
input.setAttribute("name", "name[]"); // Set the 'name' attribute to 'name[]'. Is like having '<input name="name[]">' but because you already have set the type, now is like having '<input type="text" name="name[]">'
document.getElementById("example").appendChild(input); // Push it to the container
}
<div id="example">
<input type="text" name="name[]" />
</div>
<button type="button" onclick="js();">Click</button>

The code below could be a solution for you. In this way you're not going to overwrite the existing inputs with the associated values while you're adding new inputs.
function js() {
var inputElementToAppend = document.createElement('input');
inputElementToAppend.innerHTML = "<input type=\"text\" name=\"name\" />";
document.getElementById("example").appendChild(inputElementToAppend.firstChild);
}
<div id="example">
<input type="text" name="name[]" />
</div>
<button type="button" onclick="js();">Click</button>
Let me know if this worked for you.

Following working fine for me.
<button onclick="myFunction()">Try it</button>
<p id="demo">ABC</p>
<script>
function myFunction() {
var x = document.getElementById("myP").innerHTML;
document.getElementById("demo").innerHTML += `<input type=\"text\" name=\"name\" />`;
}
<script>
I would recommend to use appendChild and removeChild instead of innerHTML

Use textarea input in JavaScript

I'm trying to create a script that uses the input.
<textarea id="textareabox" name="textarea1" placeholder="Start here..."></textarea>
function hintbutton4() {
document.getElementById("textareabox").innerHTML = 'ID=textareabox';
}
I've got this, but I don't know how to grab the text as input...
How can I do it? What should I search for?
I want the input from the text area used in the script in the last part 'ID=textareabox'. That's all.

Here is a basic example using pure JavaScript.
Essentially, from what I understand, you are trying to populate a textarea with JavaScript as well as get the value.
Code Pen: http://codepen.io/anon/pen/mWyOMq
JavaScript
function getText() {
var text = document.getElementById("textareabox").value;
alert(text);
}
function setText() {
var text = document.getElementById("textareabox").value = 'Hello, World!';
}
HTML
<div>
<textarea id="textareabox" name="textarea1" placeholder="Start here..."></textarea>
<input type="button" value="Get Text" onclick="getText()" />
<input type="button" value="Set Text" onclick="setText()" />
</div>

I Need A Javascript Code That Will Place The Word "Search" In An Empty DIV Value Tag Using The id=

I have no access to the html, I need JavaScript code that will add the word "Search" to the value="" that is blank for the input with id "ReportQuery".
How should I code it?
Here is the code below:
<div>
<input name="data[Report][query]" type="text" class="input_firm" value="" onChange="this.form.submit();" onClick="if( this.value == 'Search' ) { this.select(); }" id="ReportQuery" />
<input type="submit" value="Search" />
</div>

if its a div
$('div#idDiv').text('search');
if its an input (because you comment .value :S)
$('input#idDiv').val('search');

See this article, it comes with many examples and details:
http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml
BTW, this is about the "direct" JS way, no jQuery involved, e.g.
oFormObject = document.forms['myform_id'];
oFormObject.elements["element_name"].value = 'Some Value';

$('#ReportQuery').val('Search');
http://jsfiddle.net/L9YS4/
A good place to start for learning jQuery:
http://jqfundamentals.com/

TextField value when tried to get in javascript using jQuery is empty

I am trying to get a value from a textField onclick of submit button to a javascript function and trying to alert the same to the user. I am using JSP and Jquery(in javascript) for this.
JSP -
<input id="employeeName" type="text" name="empName" value=ben/>
<input type="button" value="search employee" onclick="abc();" />
JAVASCRIPT -
function abc() {
var typedEmployee = $('#employeeName').val();
alert(typedEmployee );
}
Problem - when i execute this, i get typedEmployee value "" and the alert is empty.
I have also tried using -
var typedEmployee = document.getElementById('employeeName').value;
Still the same issue.
I have used this method before and that works fine.
Could someone help me out with this please???

This little bit of jQuery works.
<input id="employeeName" type="text" name="empName" value="ben" />
<input type="button" id="getName" value="search employee" />
Remove the onClick from before and add an id="getName" to the button
Place the following in the head section of your page.
<script type="text/Javascript">
$(document).ready(function(){
$('#getName').click(function(){
var typedEmployee = $('#employeeName').val();
alert(typedEmployee);
});
});
</script>
EDIT - Code above changed to show how to place on the page
http://jsfiddle.net/jasongennaro/dkQFq/

Just remove the single quote from the beginning of both input type ans see if it works.

You need to put value ben under quotes & remove the single quote.
Your jquery works just fine in my FF 5.0
Try this:
<input id="employeeName" type="text" name="empName" value="ben" />
<input type="button" value="search employee" onclick="abc();" />
<script type="text/javascript">
function abc() {
var typedEmployee = $('#employeeName').val();
alert(typedEmployee );
typedEmployee = document.getElementById('employeeName').value;
alert('employee = ' + typedEmployee);
}