I have a PUG template with this code:
select#categoryDropdown(name='category', required)
option(value='none', selected, disabled, hidden) -- Select an option --
option(value='school') school
option(value='family') family
that generates this form:
<select id="categoryDropdown" name="category" required="">
<option value="none" selected="" disabled="" hidden="">-- Select an option --</option>
<option value="school">school</option>
<option value="family">family</option>
</select>
The form allows users to submit without selecting a value. I don't know if the issue is that the -- Select an option -- option is already selected or if my PUG/Jade syntax is not setting the right fields, e.g. with required="" instead of just required.
How can I fix the PUG code to force users to choose a no-default field in a select dropdown?
Your code should look like
select#categoryDropdown(name='category', required)
option(value='', selected) -- Select an option --
option(value='school') school
option(value='family') family
"none" is a valid value and the required attribute treats it as such.
Related
Validation occurs:
<select name="fruit" required>
<option value="" selected> Select a fruit </option>
<option value="apple"> Apple </option>
</select>
Validation never happens:
<select name="fruit" required>
<option value="apple"> Apple </option>
<option value="" selected> Select a fruit </option>
</select>
Question
Why HTML doesn't considers the validation of required attribute in all cases that an empty option are selected?
Because its trying to treat the first element, since it's value is empty, as a placeholder label option, not a option to be selected, and therefore selecting it does not satisfy the "required" constraint.
You are right as default HTML5 validator will only check the value of the first selectable if you mark the input as required.
https://www.w3schools.com/code/tryit.asp?filename=FNP50ZBTEYOE
To modify this, you will need to use another validator and customize it by some code as well.
jQuery Validate Required Select
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.
Is it acceptable for a select field to be both selected and disabled?
For example:
<select required name="select_name" class="select_class">
<option selected disabled value="select">select</option>
<!-- other options here -->
</select>
It is the first option in the select field and I need it to be:
the default value that is displayed on the front end
unabled to be selected
and make it so that an alternative option must be selected (as the select field itself is required)
Edit: It seems to be 'working' on the front end in FF 30, Chrome 35 and IE 11.
It is a common technique. If there are downsides to it, I don't know them yet, but I'm sure the community with bring them up.
To make it usable for the required attribute the defaultSelected and disabled option should have the explicit value "":
<select required name="select_name" class="select_class">
<option selected disabled value="">select</option>
<!-- other options here -->
</select>
I'd like to replace a multiple select box like:
<select multiple="multiple" name="options">
<option value="option1">option1</option>
<option value="option2">option2</option>
...
</select>
with an arbitrary number of simple select boxes:
<select name="options1">
<option value="option1">option1</option>
<option value="option2">option2</option>
...
</select>
<select name="options2">
<option value="option1">option1</option>
<option value="option2">option2</option>
...
</select>
Is there any way to send and retrieve via POST an array of select boxes or should I try to access every select box named options(number) until it fails? Seems a bit dirty.
I should be able to submit an action to "delete this select box" or "create new select box" so I need some way to distinguish the select boxes.
Just give the select elements the same name.
HTML forms have no concept of "an array". Every form handling library that handles arrays of input data generates them from a name having multiple values:
foo=bar&foo=baz&aDifferentField=fizzbuzz
This is what a multiple select (named foo) with two values selected will generate (when there is 'aDifferentField' in the form too).
Sometimes there are provisos involved.
Perl's CGI.pm needs the request for the data to be in list context:
my #foos = $cgi->param('foo');
PHP requires the name to end with the characters '[]'
name="foo[]"
foo[]=bar&foo[]=baz&aDifferentField=fizzbuzz
… but it all comes down to the names being the same (although the ids must still be different).
As for the deletion:
<label for="foo5">Group 5</label>
<select name="foo" id="foo5">
<option value="delete_foo5">Delete this group</option>
<option value="1">1</option>
<option value="2">2</option>
</select>