i have select field with multiple options:
<option value="lotr">Lord of the Rings</option>
<option value="harry_potter">Harry Potter</option>
when it is submitted value "lotr" or "harry_potter" is sent, depended on users choice.
However from time to time i need to set options in back end, including previously chosen option. So i make those options look like this:
<option selected="lotr">Lord of the Rings</option>
<option value="harry_potter">Harry Potter</option>
Form is displayed correctly, i can see "Lord of the Rings" in the input, but when i try to submit it, also there is "Lord of the rings" in the params. Point is i need it to be "lotr". I have no idea what i do wrong, maybe there is another way of making selected option?
You should set selected="true" and value="lotr" as below
<option selected="true" value="lotr">Lord of the Rings</option>
Use this
<option value="lotr" selected >Lord of the Rings</option>
Related
I have an HTML select form with several options in it. I want a default option of "(select an issue)", but I don't want that option to be submittable. I want the "Please fill out this field" message to show up if the user tries to submit with this option selected.
I've seen this many times on other sites, so I know it's possible, some way or another, but I'm not sure how to approach it.
This link: How do I make a placeholder for a 'select' box?, provided by Jasper Kent, helped me figure it out.
There was a solution to do the following:
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
This forces the option to have to be switched before submission, and the user cannot re-select that option either. It also makes it the default selection.
Suppose I have an HTML Form which contains a drop down (and a submit button), through which a user can select any one of the unit of length and submit the form. The code for the drop down menu is show below :
<select name = "from_length">
<option value = "choose_1">Metre</option>
<option value = "choose_2">Kilometre</option>
<option value = "choose_3">Millimetre</option>
<option value = "choose_4">Yard</option>
<option value = "choose_5">Light Year</option>
</select>
I want to select a default option which shall be displayed to the user, when the user opens the webpage.
However, there's a twist. I don't want to use the selected attribute in order to show a default option to the user. This is because the default option being displayed to the user may change depending on certain conditions (for e.g. when user selects "Kilometre" and submits this form, the user must see "Kilometre" selected by default, and not "Metre" (the first option)).
I wish to know if it is possible to select the default value based on the value of the option being selected by the user using only HTML (i.e. no JavaScript)
Thanks in advance for helping me out !
The only way I see that you can do this is with PHP, which allows you to get access to form data. The file extension would also have to be changed from ‘html’ to ‘php’ for this to work.
<select name = "from_length">
<option value="choose_1"<?php if($_POST["from_length"]=="choose_1"){echo(" selected");} ?>>Metre</option>
<option value="choose_2"<?php if($_POST["from_length"]=="choose_2"){echo(" selected");} ?>>Kilometre</option>
<option value="choose_3"<?php if($_POST["from_length"]=="choose_3"){echo(" selected");} ?>>Millimetre</option>
<option value="choose_4"<?php if($_POST["from_length"]=="choose_4"){echo(" selected");} ?>>Yard</option>
<option value="choose_5"<?php if($_POST["from_length"]=="choose_5"){echo(" selected");} ?>>Light Year</option>
</select>
My code still uses the selected attribute, but on each line, the php code checks if this option has been selected by the user, and only if it has, then the 'selected' attribute is printed into the document.
I think I may have a unique issue, or at least I cannot seem to find an answer anywhere on the internet. I have a FORM that when a selection is made on a select option above it choose the next select option to show. So basically I have multiple select options with the same name but only one group of select options shows up depending on what I selected on the choice before it. The problem is that when I make a selection to a select option in the first group, the result (value) always shows up as the first option in the last select statement with the same name. Here is a snippet:
<label for="mainIssue" id="mainIssueLabel" class="labelTitle" style="display:none;">Main Issue:</label>
<select name="mainIssue" id="warrantyFiltrationType" style="display:none;">
<option value="Type Filtration">Select One</option>
<option value="CP2000">CP2000</option>
<option value="RX">RX</option>
<option value="SFS">SFS</option>
<option value="SFX">SFX</option>
<option value="RP">RP</option>
<option value="Sand">SAND</option>
</select>
<select name="mainIssue" id="warrantyPumpType" style="display:none;">
<option value="Type Pump">Select One</option>
<option value="F350C">F350C</option>
<option value="F400C">F400C</option>
<option value="F600C-9">F600C GFCI 9</option>
<option value="F600C-18">F600C GFCI 18</option>
<option value="F700800C">F700C/800C</option>
<option value="F1000C">F1000C</option>
<option value="F1500C">F1500C</option>
<option value="F2000C">F2000C</option>
<option value="X600">X600</option>
<option value="X1000">X1000</option>
<option value="X1500">X1500</option>
<option value="CP2000C">CP2000C</option>
</select>
Say the select that comes up is the filtration select options. No matter which option I choose in the filtration selection, the value always shows up as value "Type Pump", or the first option in the last selection with the same name.
It appears that even though the correct selection options are showing, only the last selection option group is being read.
Any clues?
As stated by #David, if your intention is to post the data and you want all select fields with the same name to post the data to the server, then you need to use unique names...
OR...
In the name attribute, you need to append a [] to the end of the name that is the same across multiple selects / inputs.
An example of this which uses your code is as follows
<select name="mainIssue[]" id="warrantyPumpType" style="display:none;">
Note that this will post to the server where mainIssue is an array of each of the datasets.
Note that another small change may be what your looking for..
<select name="mainIssue['warrantyFiltrationType']" id="warrantyFiltrationType" style="display:none;">
and
<select name="mainIssue['warrantyPumpType']" id="warrantyPumpType" style="display:none;">
Note that all I did here was throw your id's into the square brackets to "name those keys". When this is posted to the server, your $_POST data (assuming your using php to capture the post), will be a multi-array where $_POST['mainIssue'] is an array with the key => values your expecting.
-EDIT-
To take this further, you would probably want your "Select One" option's value to be null or empty...
...And on the server, you would simply check for the mainIssue['specificKey'] which has a value that is not empty. With this method, you can then take the single selected value (from which ever select that it was selected in) and store it into the single DB field you need it in.
-EDIT-
An example in php side would be to loop over the array that came in, and simply check.
$mainIssue = ''; // This is what ever you want to default to before checking for the value of mainIssue
foreach($_POST['mainIssue'] as $key => $value) {
if($value != '') { // If the value is empty, then they did not select an item in that specific select field
$mainIssue = $value; // If the value was selected, then there would be a non-empty value somewhere in the multi-dimension array of mainIssue, and here is where we capture it
}
}
// So at this point of the code $mainIssue variable has a value of what ever was selected, else what ever the default was set before the loop above
You would want to make sure your "Select One" option's value attribute is empty for this to work (for all your selects which have the same name)
<select name="mainIssue[]" id="warrantyFiltrationType" style="display:none;">
<option value="">Select One</option>
<option value="CP2000">CP2000</option>
<option value="RX">RX</option>
<option value="SFS">SFS</option>
<option value="SFX">SFX</option>
<option value="RP">RP</option>
<option value="Sand">SAND</option>
</select>
You have multiple form elements with the same name:
<select name="mainIssue"
...
<select name="mainIssue"
When posting a form to the server, the name of any given element is the "key" in its "key/value pair". Thus, it must be unique in that form post. As the browser builds the form post, any element it finds with the same name as a previous element is going to overwrite that one in the form post. (This behavior may be undefined and browser-specific.)
Basically, give your form input elements unique names. You can do this by either:
Having multiple select elements with unique names.
Having a single select element which you dynamically re-populate with options based on user selection.
Is it possible for <select>-lists to reference the same list of options, similar to <input> with <datalist>?
I generate a list of several entries, where (among other things) the user selects a value of a dropdownlist. The options in this list are the same for each entry, so I would prefer it, if the list of options doesn't need to be re-added for each dropdownlist.
I can't use <input> with <datalist>, since the user may only choose from available entries.
you could do this using jquery easily,
<datalist id="mylist">
<option value="a">
<option value="b">
<option value="b">
</datalist>
<select class="someSelect">
<select class="someSelect">
$(".someSelect").html( $("#mylist").html() );
this would replace all your select list from the datalist
This is not realy the good answer. There is a big difference between 'datalist' and 'select' which for as far as I read till yet stays unspoken : in a select the 'value' can be different from the visualized 'innerHTML', which is not the case in a datalist. So what we need is a kind of 'select' with an attribute like 'selectlist="countries' the selectlist then would look like this :
<selectlist>
<option value='1'>Belgium</option>
<option value='2'>France</option>
</selectlist>
and can be reused in more then one 'select' and send the value back to the server instead of the innerHTML.
I have a <SELECT multiple> field with multiple options and I want to allow it to have only one option selected at the same time but user can hold CTRL key and select more items at once.
Is there any way how to do it? (I don't want to remove 'multiple').
Just don't make it a select multiple, but set a size to it, such as:
<select name="user" id="userID" size="3">
<option>John</option>
<option>Paul</option>
<option>Ringo</option>
<option>George</option>
</select>
Working example:
https://jsfiddle.net/q2vo8nge/
If the user should select only one option at once, just remove the "multiple" - make a normal select:
<select name="mySelect" size="3">
<option>Foo</option>
<option>Bar</option>
<option>Foo Bar</option>
<option>Bar Foo</option>
</select>
Fiddle
Why don't you want to remove the multiple attribute? The entire purpose of that attribute is to specify to the browser that multiple values may be selected from the given select element. If only a single value should be selected, remove the attribute and the browser will know to allow only a single selection.
Use the tools you have, that's what they're for.
You want only one option by default, but the user can select multiple options by pressing the CTRL key. This is (already) exactly how the SELECT multiple is meant to behave.
See this: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple
Can you please clarify your question?
<select name="flowers" size="5" style="height:200px">
<option value="1">Rose</option>
<option value="2">Tulip</option>
</select>
This simple solution allows to obtain visually a list of options, but to be able to select only one.
I had some dealings with the select \ multi-select
this is what did the trick for me
<select name="mySelect" multiple="multiple">
<option>Foo</option>
<option>Bar</option>
<option>Foo Bar</option>
<option>Bar Foo</option>
</select>
I am coming here after searching google and change thing at my-end.
So I just change this sample and it will work with jquery at run-time.
$('select[name*="homepage_select"]').removeAttr('multiple')
http://jsfiddle.net/ajayendra2707/ejkxgy1p/5/
Late to answer but might help someone else, here is how to do it without removing the 'multiple' attribute.
$('.myDropdown').chosen({
//Here you can change the value of the maximum allowed options
max_selected_options: 1
});