I am trying to make a placeholder for an input field that is a drop down list. But somehow it doesn't work.
The following is an example on how to define a placeholder for a drop down list:
<select>
<option value="" disabled selected>Please Select Something</option>
<option value="Foo">Foo</option>
</select>
We want to display Dropdown items when click on dropdown. And need to set text of selected item in Textbox, We done with it using onchange event.
But we do not want to display selected text of dropdown in dropdown;s textbox itself.
We are using dropdown reverse triangle option in front of Textbox to perform necessary logic.
Is it possible to hide dropdown selected text?
Since you havent shared any code assuming few thing I have created a fiddle.. kindly check http://jsfiddle.net/TmJCE/848/
all you need to do is after selecting an item from dropdown reset the dropdown
HTML
<select id="name" >
<option value="">select all</option>
<option value="Text 1">Text 1</option>
<option value="Text 2">Text 2</option>
<option value="Text 3">Text 3</option>
</select>
<input type="text" class="txt">
jQuery
$(document).ready(function(){
$('#name').change(function(){
var x=$('#name').val();
console.log(x);
$('.txt').val(x);
$('#name').prop('selectedIndex',0);
});
});
I have the following piece of code in a contact form for a site I am designing:
<select id="Category" name="Category">
<option value="0" selected="selected" disabled>Category</option>
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</select>
I would like set the menu such that the user cannot leave category as the selected option. Is there any way to do this with HTML? If not, how would I do it with JavaScript?
Thank you
According to the HTML5 spec,
Constraint validation: If the element has its required attribute specified, and either none of the option elements in
the select element's list of options have their
selectedness set to true, or the only option element in
the select element's list of options with its
selectedness set to true is the placeholder label option,
then the element is suffering from being missing.
If a select element has a required attribute
specified, does not have a multiple attribute specified, and
has a display size of 1; and if the value of the first
option element in the select element's list of
options (if any) is the empty string, and that option
element's parent node is the select element (and not an
optgroup element), then that option is the select
element's placeholder label option.
Therefore, you can use
<select id="Category" name="Category" required>
<option value="" selected disabled>Category</option>
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</select>
When the user click on any option, he can´t return the first one back. But he can submit form without change, then you need to validate via JS.
It's quite simple,
function validate() {
var select = document.getElementById('Category');
return !select.value == 0;
}
And the form in HTML:
<form onsubmit="return validate()">...</form>
Will disabling select work for you?
<select id="Category" name="Category" disabled>
<option value="0" selected="selected">Category</option>
...
</select>
Or maybe disabling all but selected option will work for you (as shown here: https://stackoverflow.com/a/23428851/882073)
Ideally, you would simply remove the selected attribute from disabled options on the server side when generating the HTML document to begin with.
Otherwise, if you are using JQuery, this can be done fairly easily with:
$('#Category').find('option:not([disabled])').first().prop('selected', true);
Add this to your ondomready event handler. This will force the first non-disabled option to be selected for this select element regardless of its options' selected attributes. The disadvantage of this method is that it will prevent the selected attribute from being able to be used at all with this select element.
On the other hand, if you are trying to create category headers within a select element, you should consider using an optgroup element instead, since that is the correct semantic markup for this:
<select id="Category" name="Category">
<optgroup label="Category">
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</optgroup>
</select>
I have a validation message under a input. When a user inputs a message in the input and then selects an option from the select box the validation message hides and the select options get separated from the select box. I'm looking for a way to keep the options directly under the select box.
Thanks in advance.
Here is some quick code.
<input type='text' id='message'/>
<div id='msg'>add your message</div>
<select name="schools" id="schools" value="School" title="School">
<option value="">School</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">Three</option>
</select>
$('#message').blur(function () {
$('#msg').fadeOut();
});
Here is a fiddle http://jsfiddle.net/5qbEM/29/.
Looks like this is a chrome bug.
Ok, I have form kind of like this:
<form method="post" action="processform.php" name="form1">
<input type="hidden" name="recipient" value="email1" />
<input type="text" />
</form>
I want to add a list containing multiple recipients, like this:
<select>
<option selected="selected">Choose recipient</option>
<option value="email1">Recipient 1</option>
<option value="email2">Recipient 2</option>
</select>
What is the best way to replace the value of "recipient" by selecting an option from the list?
You can either bind a change event to the select drop down list for auto update of your hidden field.
$("select").change(function(){
$("input[name=recipient]").val($(this).val());
});
Or your submit event you can assign the hidden field like this:
$("input[name=recipient]").val($("select").val());
Example on jsfiddle
$('input[name=recipient]').val($('select[name=recipient-list]').val());