I must be doing something very stupid.
Whatever I tried I always get an empty select.
This is the code:
<select>
<option disabled="">jknjk</option>
<option selected value="local"> Со склаа</option>
<option value="preorder"> Предзаказ</option>
</select>
I swear I used select elements before and never had problems with it.
But I have no ideas why it works so in this case when it shouldn't.
If I click it one time after loadiing - it can be used.
As one can see it has selected value (in inspector)
Could it be some CSS what makes it behave so?
Full image
Full css styles attached to select element
This appears to be a Chrome bug, discussed on this question and this question. A work-around solution is to apparently set 'autocomplete="off"' on the form. Perhaps keep an eye on the status of the bug report that was filed in the second link, to see the bug fixed or find a permanent solution.
Related
I can't find a way to block one option from select list.
For example I have on page:
<select name="test_select">
<option value="1">Something I don't need</option>
<option value="2">Something I still need</option>
</select>
I use filter ##option[value="1"]
So.. seems that filter don't block initial state of select. After page loaded default value "I don't need" still displayed.
When I'm trying to select another option(s) - the first option disappear from the list which is fine, but still problem for me that initially unneeded option shown after page loaded.
Is there a way to block(remove) this option completely?
The filter works as expected because it's supposed to hide the <option> element, not the <select> element. If you want to hide the <select> element but only if it has a certain value, you'd need to wait for parent selectors to (hopefully) arrive with CSS4. Those would allow you to write the filter as
##!select > option[value="1"]:checked (based on the syntax in the W3C working draft)
##select:has(> option[value="1"]:checked) (based on the syntax in the CSSWG editor's draft)
What I have in my code right now:
<select>
<option value="...">Dr. Steve 555-222-9393</option>
<option value="...">Jim 333-999-1111</option>
<option value="...">New Emergency Services 0118-999-881-99-9119-7253</option>
</select>
It looks bad, and after a few dozen entries it's very, very hard to read.
What I'd like is to emulate a dropdown by using a table and then displaying just one row of the table at a time (with the currently selected row's value stored in a hidden input).
The question: before I start writing it myself, has someone already done this (in any library)? I've been going through the jquery plugin registry and there are plenty of plugins for converting <ul> to behave like <select> and tons to create fancy multi-selects. (Some of these might even work, if you could disable the multi- part. SE's own Tags input has pretty fancy formatting in its "dropdown".) But if there's one that can turn a <table> (or anything else) into a select-with-columns, it's lost in the noise.
Note: I've found a number of related posts that suggest using monospace fonts and padding to line data up in a plain select tag, but I'd like to think it can be done better, especially after seeing jquery plugins like Chosen.
I wasn't able to find anything that could convert a table to a dropdown with columns but I was able to use SelectBoxIt's data-text attribute to fake it with inline-block:
<select>
<option value="1" data-search="555-555-5555 Bob" data-text="<span style="display:inline-block; min-width:10em; margin-right:1em;">555-555-5555</span><span style="display:inline-block;">Bob</span>"></option>
<option value="2" data-search="444-444-4444 Steve" data-text="<span style="display:inline-block; min-width:10em; margin-right:1em;">444-444-4444</span><span style="display:inline-block;">Steve</span>"></option>
</select>
data-search is required in order for type-to-search to work (otherwise, it appears to expect the user to type the HTML as it appears in data-text). More work would be needed to make the columns line up if someone really entered a phone number like 0118-999-881-99-9119-7253.
I have a form which is used as an interface for CRUD on database records. Some of the elements on the form are interdependent, such that if one field has a value of X, then other fields should be made required and filled out by the user.
A simple example might be something like a personal info section:
<select name="relationship-status">
<option value="single">Single</option>
<option value="married">Married</option>
</select>
<input type="text" name="spouse-first-name" />
<input type="text" name="spouse-last-name" />
...where the fields spouse-first-name and spouse-last-name would be required if relationship-status was set to married, and would be disabled (or hidden) otherwise.
My question is, in this example, when a person goes from married to single and wants to update their data as such, we also want to clear the spouse name values and post this back to the server so that the values are cleared in the database. We can use JavaScript to clear the fields for them when they change to single, but if we disable the form elements so that they can't edit them, then they don't get POSTed when the form is submitted.
I can think of the following solutions:
We could make them readonly instead of disabled, but that method only works for certain form controls (specifically, it does not work for other select elements), so this isn't an option.
We could duplicate each of these fields as a hidden input that would be POSTed with the form, but not editable by the user, but this seems like such a hack.
We could also enable the disabled fields right before submitting, and then re-disable them right afterwards. This is the method I'm using right now, but I feel like I'm missing something, and there has to be a better way.
Is there something I'm not thinking of, or a more sensible way of accomplishing both:
Not allowing the user to edit a field, and
Allowing the field's value to be POSTed with the form, even if blank.
My recommendation is, beside to make the validation in the client side, add in the javascript the function form.submit(), if someone disable the JS won't be able to submit the form, beside that agree with the others comments, add server validation.
I found that the most robust and least kludgy solution is to use the readonly property for all elements except <select>. For <select> elements, I just disable the <option> child elements that aren't currently selected. This effectively prevents the user from changing the value. I then color the <select> as though it were disabled with a gray background to complete the illusion. At this point, all form elements will post with the form, even with no values, and regardless of whether they're "disabled" or not.
What I want is that the text box is only accessible if a certain option is picked from the drop down menu and i have a html form as below:
<tr>
<td>a. Did any of your staff participate in training or orientation sessions related to any aspect of social performance management, during the reporting year?
<td >
<select name="mfi_4_a_i">
<option>Please choose one.</option>
<option>Yes</option>
<option>No</option>
<option>No, but planning in future</option>
</select>
<p>if not,and not planning please explain why not?</p>
<input type="text" name="mfi_4_a_ii" class="init" disabled="disabled"/>
</tr>
Now when the option No, but planning in future is selected then the textbox must be enabled.This type of dropdown menu has been used many times in this form so i have to enable the textbox in another similar case too so how a single function can be written to do this.Help me out guys.
First of all, you should close your td's by adding a </td> to the end of the contents. That way browsers will have less trouble finding the right element if you use javascript.
Also, you will need to add values to your options, so that a form handler knows which has been picked. You could use something like:
<select name="mfi_4_a_i">
<option>Please choose one.</option>
<option value="yes">Yes</option>
<option value="no">No</option>
<option value="later">No, but planning in future</option>
</select>
You can leave the first one blank because they have to pick something else anyway.
About the textbox, you have to use javascript for this. Do you happen to use jQuery? That would make it easier to handle these things, especially if you re-use it a lot. It can also be done in regular javascript but I'm not sure about the code for it. Here's the solution in jQuery:
$('select').change(function(){
$input = $(this).parent().find('input');
if($(this).attr('value') == 'later') {
$input.removeAttr('disabled');
$input.focus();
} else {
$input.attr('disabled','true');
}
});
What this does: everytime a select dropdown changes values (something has been picked) it checks whether the option with value later was picked (maybe 'specify' would be more appropriate..). If that's true, it finds the first textbox that's inside the same element as the select. In this case both are at the same level in a td, if your html gets more complicated maybe you have to find another way to look for the nearest textbox.
If the input is found, it is set to enabled and the cursor is placed inside so they can start typing immediately.
If another option than 'later' is picked, the textbox is disabled again.
I have a case where I want to allow a form variable to be set to one of a set of value (in my current case true/false) or left unset (in which case no value is returned rather than some 'none' value or a blank). A check box can give the unset bit but only one set value. A radio element could work, sort of. But once a value is selected there is no way to go back to unset. All the other inputs I've looked at always set the variable no matter what.
Am I missing something or am I just going to have to accept a less-than-ideal solution?
Three radio buttons or a <select> with three <option> will do.
Put three radios: A, B and None
Do a 'drop down menu' as show here: http://www.echoecho.com/htmlforms11.htm
Create the default value as 'None' followed by option A and then option B.
What about a drop down list with
---Please Select---
Option A
Option B
I've been applying to a lot of jobs online lately, and this is the route people generally have been taking.
Would a dropdown box work?
<select name="choices">
<option>(None)</option>
<option value="a">Choice A</option>
<option value="b">Choice B</option>
</select>
You would need to use some javascript. If you have jQuery there are several tri-state checkbox plugins.
For example: http://plugins.jquery.com/project/tristate-checkbox
There are also probably non jQuery scripts if you google for "tri state checkbox"
For example: http://caih.org/open-source-software/tri-state-checkbox-in-javascript/
Using 3 radio buttons in one group, you could hide the first 'none' radio button with CSS (visibility:hidden; or display:none;), and if that's the one still selected during your form validation, then the user hasn't chosen either of the true or false radios.
EDIT (post comments):
If no-Javascript is a requirement, then you can conditionally apply a 'hideableItem' class on the hidden radio, if scripting is disabled the worst you'll get is 3 radio for the user to choose from, as others have described. If JS is enabled, then the default radio is hidden and provides the behaviour i've described.
The conditional hiding if JS is dis/enabled technique is described here: http://lucassmith.name/2008/10/script-to-add-css-only-when-javascript-is-available.html
I use it all the time, its great.