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/

$_POST not working with required used in input tag

I have a form that works flawlessly until I add the required attribute to the input tag. Then the form doesn't post. I'm not sure where in the form the required attribute is breaking the $_POST function but once broken all required attributes have to be removed. Has anyone experienced this behavior?
The ONLY thing that comes to mind is I have about 17 <div> with display:none set. Using Javascript, when a selection is made from a drop-down <select> tag the JavaScript changes the display to display:block as each <div> has unique set of <input> and <select> tags based on the building type selected. All of this is inside the <form> </form> tags.
There's nothing special about the <input> tags. Only when I add the required attribute to the <input> tags inside a <div> does it have a problem.
A typical <input> tag looks like this:
<input name="total_meters" type="number" id="total_meters" tabindex="20" size="40" min="1" max="99999999999" value="2" />
The required attribute is going between <input and name.
I'm asking here before I code my own validation routines.

Use jQuery function to add attribute "required" to the require input tag or
Make multiple form tag and multiple summit button for each div tag and adding attribute "required" into input tag.

Is there a label in HTML

i'm coming from Java background, Is there a label in HTML, where I could using for example javascript update the value.
I mean by label here, something similar like text input, but not not possible to update it, and it looks non-updateable.

You said you wanted something similar to a text input, so... use one, then! Just disable it, like
<input type='text' disabled>
^It's MAGIC!
You don't want label literally in HTML, because it's in no way similar to a text input. Labels in HTML are used for things like putting text in front of radio buttons.
If you wanted something similar to a Java label, you would just use the p tag, unless it would be behind a text input or so, then you would use the label tag.

The obvious to create a label would be using <label>
<label for="coward">Förnamn</label> <!-- points to to input element with id coward -->
<input class="text-input" name="coward" type="text" id="coward" value="whatever" />
But I think you're looking for something to "store a value in a form" that shouldn't be editable. You could use a hidden text input for that.
<input type="hidden" name="hiddenField" value="whatever" />
You could use divs (and style it the way you want it), and then just fetch the html from that div.
Take a look at the other answers as well.
There's a lot of options. What do you actually want to do? It would be easier to give you an answer that suits your needs.

A label is a <label>...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

You have a couple of options.
There is actually a <label> element, which is typically used for labeling the items in a form.
You could also do a text input (<input>) and set it to disabled:
<input disabled>
Or you could just use a simple paragraph element <p> and style it how you want.
Here is a JSFiddle with some examples: http://jsfiddle.net/QXP75/
However, you'd want to use something semantic, so knowing what the purpose is would allow a more specific message. Also, with CSS, you can make just about any element look like anything.

Can not show changed value to hidden field with javascript

I have a checkbox and 2 number input fields:
<input name="exercise[hold]" type="hidden" value="0"><input class="te-cb" id="exercise_hold" name="exercise[hold]" type="checkbox" value="1">
<input class="exerciseReps input-mini" id="exercise_number_of_reps_in_set" min="0" name="exercise[number_of_reps_in_set]" placeholder="Reps" type="number" style="display: none; ">
<div class="input-append te-len" style="display: inline-block; ">
<input class="exerciseLength input-mini" id="exercise_length" min="0" name="exercise[length]" placeholder="Length" type="number">
<span class="add-on">sec</span>
</div>
One input field is hidden with js:
$('.te-len').hide()
In form above there is also text input field with auto competition which gets the data with ajax (that is not relevant here). With jquery I am setting the values of input fields of form with data I got from server.
I also show hidden field if value for checkbox is true:
if data[selected].hold
$('.exerciseReps').hide()
$('.te-len').show()
and that works
Every field is set correctly accept the hidden field, that field is empty.
The weird thing is that I placed alert of that hidden field's value after it has been set and alert shows the value that should have been set but the value is not visible
$('.te-len').val( data[selected].length )
alert $('.te-len').val()
Note: the js code is actually coffescript.

I think the problem is because you are setting value to a div. Although use of val works, this function is primarily used on form elements such as input, select and textarea.
If you mean to replace the content of the div.te-len then you could use either html or text:
$('.te-len').html( data[selected].length )
But it sounds like you are trying to show data[selected].length value in the input.exerciseLength numeric field. For that you should be using:
$('#exercise_length').val( data[selected].length )

date format of textfield using java script and php

i am making a form that has a date field using textfield, i want my date field to have a label format inside the textfield, here's the picture:
after clicking on the textfield the format will be erased and the hyphen will remain like this picture:
i already made the code for the label format,
here's my code:
<input type="text" name="date" value="DD_MM_YYYY" id="date" style="width:180px" onclick="if(this.value=='DD_MM_YYYY'){this.value=''}" />
</p>
My problem now is the hypen that will remain after clicking the textfield.
Anyone knows how to do that?
Thanks in advance.

I would recommend Masked Input Plugin.
http://digitalbush.com/projects/masked-input-plugin/
You can define your own type of mask by using the code:
jQuery(function($){
$("#myinput").mask("99-99-9999",{placeholder:" "});
});
Then you can define a placeholder to the input:
<input id='myinput' placeholder='dd-mm-yyyy'>

You can use the placeholder attribute.
<input placeholder=" - - " value="DD-MM-YYYY" />
You can continue to set the value to nothing when the element is focused. On blur set the value back to DD-MM-YYYY.
Note that this attribute isn't supported by all browsers.