Develop Reference

Javascript - fill in the textbox dynamically

Is it possible to fill textbox using javascript?
I have this code
<input type="text" id="output">
After using the script, I want to have selected value in textbox. I'm very new to javascript and I tried this
javascript: document.getElementById('output').innerHTML = "100";
However, it doesn't work as I expected. So after using the script I want HTML look like
<input type="text" id="output" value="100">
Is there any way to manage this? Thanks

You can use .value or .setAttribute.
document.getElementById('output').value = "100";
or
document.getElementById('output').setAttribute("value", "100");

How to Submit a Javascript Value in an Input Field

Simply, how can I do this?
<input type="hidden" value="some javascript value" />
I have a form whereby when a user clicks on Add More, more input fields are added via javascript.
I'm also using javascript-declared values to track and limit the number of fields a user can add.
I need a way for my php code to retrieve these javascript values.

Use append
$('#hidden').val('my Text');
input field should be
<input type="hidden" id="hidden"/>

the question is a bit vague, but i will give it a go
try adding a name as an array and then you can use get or post
<input name="myjavascriptinputs[]" type="hidden" value="some javascript value" />
in your php you will be able to use
foreach($_GET['myjavascriptinputs'] as $ajavascriptinput)

From the button you must be calling a javascript to add these fields dynamically. Simply append the code to that function to hand over these values to the field.
<input id="myinputfield[]" type="hidden" value="" />
<script>
function addOneMore(){
var newField = // code to add one more field
newField.value = newValue;
}
</script>
Will solve your purpose.

many Datpickers with same class getDate

I've got a question, got couple of input datepickers like
<input name="datepicker_one" class="datepicker" readonly type="text" value="12-12-2013" />
<input name="datepicker_two" class="datepicker" readonly type="text" value="13-12-2013" />
<input name="datepicker_three" class="datepicker" readonly type="text" value="14-12-2013" />
and I'm trying to get values of clicked datepicker, while trying to avoid writing different methods for each of those inputs, so I wonder if there is a way to get datepicker value just by clicking on input with class .datepicker like:
$(".datepicker").click(function(e){ $(this).val(); });
but this gives me undefined value also:
$(".datepicker").click(function(e){ $(this).datepicker("getDate"); });
Does not seems to work.

You aren't using your value. The statment:
$(this).val();
Is meaningless as it doesn't do anything. You get the value, but didn't use it. If you did
console.log($(this).val());
you would actually see the result.

Try this:
$(".datepicker").click(function(){
alert($(this).val());
return false;
});

Unable to display variable content inside a input box

I'm using jquery, JS and html with a parse.com backend.I cannot find an exact solution on SO or google to this issue.
I've saved a string variable from a db using
document.getElementById("div_name").innerHTML = name;
I'm able to display it on the html page using
<div id= "div_name"></div>
Now I want to add it to an input box and have the string display as the default value in the box. I thought I could do this using
<input type="text" id="div_name"/>
But this only displays a blank box, no data. What have I missed in my approach please?

As Tilwin Joy pointed out, with pieces from original post, e.g.,
<div id= "div_name"></div>
<input type="text" id="div_name"/>
there may be 2 elements with same id ?
try
html
<div id= "div_name"></div>
<input type="text" class="div_name" value="" />
js (utilizing jquery library)
$(".div_name")
.val($("#div_name").text())
jsfiddle http://jsfiddle.net/guest271314/6L7jK/

If you are using <input>, should be
document.getElementById("div_name").value = name;

validating required fields with asp.net required field validators using jquery

HTML:
<fieldset>
<p>
<label>SOME LABEL</label><span class="required"> *</span>
</p>
<input type="text" id="txtBox">
</fieldset>
Using jQuery i am trying to get "span.required" and add a class "missing" (changes color to red).
JQuery Code:
$('#txtBox').closest('fieldset').find('span.required').addClass('missing');
JQUERY CODE FOR required field validator in ASP.NET:
for (var i = 0; i < Page_Validators.length; i++) {
var val = Page_Validators[i];
var ctrl = document.getElementById(val.controltovalidate);
if (ctrl != null && ctrl.style != null) {
if (!val.isvalid) {
ctrl.closest('fieldset').find('span.required').addClass('missing');
}
else {
//alert('no error');
}
}
}
ERROR via Console: object [ctrl object - the textbox] has no method closest
i have tried different interations using "find" "parent" etc. but nothing i try seems to work.
What is wrong with my code? I cannot grab that span.required
Thank you to everyone's input, I have learned a lot from each of your input. EVERYONE's answer has valid and working code, however only the selected provided the solution.

First off, there are a couple of changes in your HTML that you should make which will not only help you solve this issue, but will also make for cleaner, more valid code:
Add a for attribute to all of your <label> tags that pairs them with the input that they match (this really should always be done with labels), and
Move the <span class="required"> *</span> inside the label (since it really is part of the label)
The resulting code would look like this:
<fieldset>
<p>
<label for="txtBox">SOME LABEL<span class="required"> *</span></label>
</p>
<input type="text" id="txtBox">
</fieldset>
Once you've done that, what you are trying to accomplish becomes much easier:
Instead of:
ctrl.closest('fieldset').find('span.required').addClass('missing');
. . . you can use the id of the input (val.controltovalidate) as part of a JQuery selector to find the related label directly:
var $targetLabel = $("label[for='" + val.controltovalidate +"']")
$targetLabel.find('span.required').addClass('missing');
I've used this many times to pair validations with the labels of the field that is being validated . . . quick and clean. :)
Edit: I split up the last JS piece to keep it from scrolling, but it could be one line. :)

Try txtbox.parent() instead.
txtbox.parent().find('span.required-field').addClass('missing')

$('span.required').addClass('missing');

Try this:
$(function(){
$('#txtBox').parent().find('span.required').addClass('missing');
});
Check http://jsfiddle.net/alaminopu/unZPZ/

Check this one out, I used both, closest() and parent().
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.missing{color:red;}
.required{color:blue;}
</style>
<script>
$(document).ready(function(){
$(function(){
$('#txtBox').parent().find("span.required").removeClass("required").addClass("missing");
//$('#txtBox').closest("fieldset").find("span.required").removeClass("required").addClass("missing");
});
});
</script>
</head>
<body>
<fieldset>
<p>
<label>Some Label</label> <span class="required"> *</span>
</p>
<input type="text" id="txtBox">
</fieldset>
</body>
</html>
http://jsfiddle.net/GdBnw/
HTH.