Develop Reference

Get selected option html when using parent form (not document) using vanilla javascript

I have an HMTL form, that it's repeated multiple times on a webpage, in order to prevent to target every specific field name, of every form, i'm doing a general-use javascript script that detects where was triggered and obtain the values of the fields (of that specific form traversing from it) in order to send it to another server using ajax call. The problem is that I can't find a way to obtain a selected item of a select dropdown list.
Since it's a general-use script I can't use ID value.
function sendForm(reference){
const form = reference.closest('form');
var elements = form.getElementsByTagName("input");
var name = elements.namedItem('name').value;
var mail = encodeURIComponent(elements.namedItem('email').value);
// Here I don't know how to get the selected item from the option group)
var program = elements.namedItem('program').value; // (it doesn't work);
console.log(name)
console.log(mail)
/*
Ajax Stuff that is already solved and not needed to show the point
*/
}
<form id="my-form" data-origin="form-1" action="">
<input placeholder="Name*" type="text" class="form-control" name="name" id="name" required>
<input type="email" class="form-control" placeholder="Email*" name="email" id="mail" required>
<select class="form-control" name="program" required>
<option name="programa" value="">- Select -</option>
<option value="LCP">First choice</option>
<option value="LSP">Seccond choice</option>
<option value="LAE">Third choice</option>
<option value="LD">Fourth choice</option>
</select>
<button type="button" onclick="sendForm(this)" class="btn">Send</button>
</form>

var programa = document.getElementById('program').value; should work, as long as the <select> only allows one option to be selected.

If you look at the MDN documentation for the HTMLSelectElement, you can see that the value property will be the value of the selected option (or the first selected option in case of a <select multiple> element).
Also, the HTMLFormElement has an elements property (read more about it here) which returns a collection of all the form controls in the form (not just inputs, but also <select> elements which is what you need instead of getElementsByTagName on the form.
So in your code, you could do:
const form = reference.closest('form');
const program = form.elements.namedItem('program').value;
Sidenote: if you're going to use const for one variable, stop using var. It's a misfeature.

javascript: changing "multiple" attribute of the "select" element does not work

Windows 7 64 bit, Chrome version 61.0.3163.100
I have a html page with a listbox:
<select id='lst' multiple>...</select>
I need to disable multiple items selection for this listbox.
I have a javascript function with this code:
lst = document.getElementById('lst');
lst.multipe = false;
I have checked in the debugger - the value changed to "false".
But in another function called "onclick", it is "true" again.
And multiple items could be selected with [shift] or [ctrl] pressed.

The multiple attribute is a boolean attribute, and, according to the HTML specification:
The presence of a boolean attribute on an element represents the true
value, and the absence of the attribute represents the false value.
Use removeAttribute() instead:
const element = document.getElementById('select');
element.removeAttribute('multiple');
<select id="select" multiple>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>

lst = document.getElementById('lst');
lst.removeAttribute('multiple');
lst.setAttribute('multiple', true);
<select id='lst' multiple>
<option>1</option>
<option>2</option>
</select>
Multiple is based on presence, so you need to remove or set it if need from javascript.

HTML make <option> invalid

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>

First option of dropdown not an option; force to use other options [duplicate]

This question already has answers here:
How do I make a placeholder for a 'select' box?
(41 answers)
Closed 9 years ago.
<select name="name">
<option>Select an option.</option><br/>
<option>A</option><br/>
<option>B</option><br/>
<option>C</option><br/>
</select>
HTML5 has required="required", and this is the kind of effect I want with the dropdown above. I don't want the user to select "Select an option", only "A", "B", or "C". I know I could set a default value of A and just remove the "Select an option" option entirely, but I don't want users to click haphazardly without reading the options available.
Can this be done with HTML and/or JS?

edit: this code is only to force users to choose a valid option, instead of the one by default... validation for submit/change/etc should be added
You should just disable the first option and setting it as selected by default:
<select name="name">
<option disabled="disabled" selected="selected">Select an option.</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
That should do the trick, demo here http://jsfiddle.net/pixshatterer/Q27HX/

If you use the Validation plugin (here: http://jqueryvalidation.org/) and update your <select> to supply value on each <option>, it will prevent form submission if the "empty" value is selected:
<select name="name" required>
<option value="">Select an option...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
It's also worth noting that the only valid child elements of a <select> is either <optgroup> or <option>, so remove those <br />s.
If jQuery is not an option, you could always add an onclick to the select or an onsubmit to the form and do a quick check on an empty string (or whatever you set the default value to).

Just give display:none to the element option and disabled=disabled. Thanks to #pixshatterer
http://jsfiddle.net/Xh9nh/4/
EDIT : Put visibility:hidden by mistake.

Can I apply the required attribute to <select> fields in HTML?

How can I check if a user has selected something from a <select> field in HTML?
I see <select> doesn't support the new required attribute... do I have to use JavaScript then? Or is there something I’m missing? :/

Mandatory: Have the first value empty - required works on empty values
Prerequisites: correct html5 DOCTYPE and a named input field
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
As per the documentation (the listing and bold is mine)
The required attribute is a boolean
attribute.
When specified, the user
will be required to select a value
before submitting the form.
If a select element
has a required attribute specified,
does not have a multiple attribute specified,
and has a display size of 1 (do not have SIZE=2 or more - omit it if not needed);
and if the value
of the first option element in the
select element's list of options (if
any) is the empty string (i.e. present as value=""),
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.

The <select> element does support the required attribute, as per the spec:
http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element
Which browser doesn’t honour this?
(Of course, you have to validate on the server anyway, as you can’t guarantee that users will have JavaScript enabled.)

Yes, it's working:
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
you have to keep first option blank.

You can use the selected attribute for the option element to select a choice by default. You can use the required attribute for the select element to ensure that the user selects something.
In Javascript, you can check the selectedIndex property to get the index of the selected option, or you can check the value property to get the value of the selected option.
According to the HTML5 spec, selectedIndex "returns the index of the first selected item, if any, or −1 if there is no selected item. And value "returns the value of the first selected item, if any, or the empty string if there is no selected item." So if selectedIndex = -1, then you know they haven't selected anything.
<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
function displaySelection()
{
var mySelect = document.getElementById("someSelectElement");
var mySelection = mySelect.selectedIndex;
alert(mySelection);
}
</script>

You need to set the value attribute of option to the empty string:
<select name="status" required>
<option selected disabled value="">what's your status?</option>
<option value="code">coding</option>
<option value="sleep">sleeping</option>
</select>
select will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input -> raising the required message.
w3schools
The value attribute specifies the value to be sent to a server when a form is submitted.
Example

<form action="">
<select required>
<option selected disabled value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</select>
<input type="submit">
</form>

try this, this gonna work, I have tried this and this works.
<!DOCTYPE html>
<html>
<body>
<form action="#">
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>

Make the value of first item of selection box to blank.
So when every you post the FORM you get blank value and using this way you would know that user hasn't selected anything from dropdown.
<select name="user_role" required>
<option value="">-Select-</option>
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>

first you have to assign blank value in first option.
i.e. Select here.than only required will work.

Works perfectly fine if the first option's value is null. Explanation : The HTML5 will read a null value on button submit. If not null (value attribute), the selected value is assumed not to be null hence the validation would have worked i.e by checking if there's been data in the option tag. Therefore it will not produce the validation method. However, i guess the other side becomes clear, if the value attribute is set to null ie (value = "" ), HTML5 will detect an empty value on the first or rather the default selected option thus giving out the validation message. Thanks for asking. Happy to help. Glad to know if i did.

In html5 you can do using the full expression:
<select required="required">
I don't know why the short expression doesn't work, but try this one.
It will solve.

Try this
<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>

You can do it also dynamically with JQuery
Set required
$("#select1").attr('required', 'required');
Remove required
$("#select1").removeAttr('required');