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.
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)
I have a select box.
When no value is selected, I have the empty option --. It's OK !
Once an option is selected, the empty option disappears.
But I would like that it is always there to have the opportunity to choose --.
Is it possible ?
<select ng-model="project" ng-options="act.id as act.name for act in actors"></select>
please see here:http://plnkr.co/edit/SWpRZA1dafNNva70z6KE?p=preview
<select ng-model="project" ng-options="act.id as act.name for act in actors">
<option value="">--<option>
</select>
ng-options gets priority when any option is selected from .
As per the standard html can contain . Thus the mentioned option gets priority as the selection is null.
And in view, html priority is higher, thus always value is seen unless the ng-option value already selected from controller.
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 jsp page with two radio tags.
The page contains a struts2 form. When I submit the form one of two radio must be automatically checked.
Is it possible to do that?
One of the features of a radio input is that an item in a radio set once selected cannot be deselected except by another member of the set being selected (unlike a checkbox "set"). i.e. if you initialise the page with a selection you can guarantee you will have a value. Does a default value exist you can do this for? Then you can just set checked="checked" on that item.
Alternatively you'll just have to add another validation rule in JS and/or the server side.
I believe that with:
<html:radio property="foo" value="yes"/>
this radio tag will show selected (by default) if the method getFoo() of the form-bean returns the string "yes".
May be you can use that to link your form submit to your radio tags ?