Develop Reference

Select all text in textbox when label is clicked

I am using label for attribute for input elements in my website that will help blind users.
Currently when user click on label, the corresponding input is getting activated. That means if there is textbox for name, then cursor will
go in the start of textbox.
For example, if name in textbox is "John", then on click label, cursor will enter in textbox and will show before "John".
But what I want is that it should select "John". That means text of textbox should be selected.
Can anyone help me how I can implement this?
My code is shown below:
<div class="editor-label">
<label for="ContactName">*Name</label>
</div>
<div class="editor-field">
<div>
<input id="ContactName" maxLength="40" name="ContactName" type="text" value="John" />
</div>
</div>

I am unsure if you can achieve this by just using html/css, so it's very likely that you need to use a JS lib, such as jQuery.
By using jQuery, you can use the select() method when the label is clicked, using something like this;
$(function() {
$('label').click(function() {
var id = $(this).attr('for');
$('#'+id).select();
});
});
A working example can be found here: http://jsfiddle.net/sf3bgwxr/

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;

Jquery validation on div content

I am extending the functionality of a Business Intelligence tool. This is a web based application. Currently attempting to create some type of "form" validation. The strange thing is that this application reuses the same input for every single one of the form inputs. Once the user clicks away from the input html object, some javascript moves the value entered into the input into the text within a div.
Before:
<div>
</div>
Input filled out:
<input type="text" value="this is a test">
Result:
<div>
this is a test>
</div>
Is there any way to create a listener which will validate what is written inside of the div?

try this
<input type="text" value="this is a test"/>
instead of
<input type=text value=this is a test></input>
hope this helps...

input type disabled and readonly behave differently with a href

I have below code where i disable and enable a calendar clickable icon.
<p>
<label>
<input type="text" name="date18" id="date18" value="01/01/2012"
style="width:75px;" disabled/>
</label>
<a href="#" onclick="somecaledarrelatedstuff()" name="calid" id="calid">
<img src="icon-Calendar.jpg" alt="Click to pick a date from a popup
calendar"/>
</a>
</p>
When I add disable as above both the input field and the link to the calendar popup are disabled as well. But because the values of disabled elements are not submitted, I thought of making it read-only. However, the problem is that when it's read-only, only the input field is getting read only (not also the calendar pop up link) too, like using disable.
I know if I want to disable (just to prevent the user from editing) both input field and href I can use disabled and have a hidden input variable, and submit it and refer to that variable. But I was looking for an alternative way because I will have a lot of refactoring to do to my code if I introduce a new hidden variable.
Thanks.

If you want the input field to be disabled but still send its value upon submission of the form, you can use bit of JavaScript for that.
To achieve this, first add this bit to the <form> tag:
<form ... onsubmit="EnableInputs(this);">
Then add this JS function:
function EnableInputs(oForm) {
oForm.elements["calid"].disabled = false;
}
You can enable more elements like this, or all inputs using getElementsByTagName and looping over it.
This will just enable the element when submitting thus send its value.

Disabled does not submit values, but read-only does submit values.

How to cancel edit/disable cached input (of type text) value?

I have an input of type text, from which I have already entered value 1234
it has been saved in cache as shown below.
The problem here is that, it is extremely frustrating to select the textbox in the next row.
Is there a way to not to display that 12334 (highlighted in the screenshot) from ever being displayed through HTML markup or javascript?

As #John pointed out, on modern browsers you can use the HTML5 valid autocomplete attribute, in your screenshot I see many textboxes, if you want to disable autocompletion on the whole form you can set this attribute directly at the form element:
<form name="form1" id="form1" method="post" autocomplete="off"
action="http://www.example.com/form.action">
[...]
</form>
More info:
How to Turn Off Form Autocompletion

<input type="text" name="input" autocomplete="off" />

To apply this to all input controls, write the code below (using jQuery):
$(document).ready(function () {
$('input[type=text], input[type=password]').attr('autocomplete', 'off');
});