How can I use required with the below code of select. I had values for all options. As for required to work, default selected option should have empty value. How can I get the required working without removing value of any option? Is there some tweak ?
<select required>
<option value = "-1" selected> </option>
<option value = "1"> one </option>
<option value = "2"> two </option>
</select>
In most modern browsers, a form containing an element with required will not submit until it has a value.
To make select work like that use an empty string as the value for the default item:
<select required>
<option value = "" selected> </option>
<option value = "1"> one </option>
<option value = "2"> two </option>
</select>
Live example: https://jsfiddle.net/zu80u9my/ (Form will not submit if a value has not been selected)
Related
My question is how can I get the value from aria-labelledby value?
I have two method let user input, one is text another is drop-down list，
but I can't find how to select value from same label.
Here is my code
<label id="lblconnect">Connect:</label>
<input id="connect text" name="connect text" aria-label="lblconnect">
<select id="connect" name="connect" aria-label="lblconnect">
<option hidden selected>Choose Connect Type</option>
<option value="wired">Wired</option>
<option value="wifi">WIFI</option>
<option value="bt">BT</option>
<option value="ble">BLE</option>
<option value="ble5">BLE5</option>
<option value="lora">LoRa</option>
<option value="nb-iot">NB-IoT</option>
<option value="zigbee">ZIgBee</option>
</select><br/><br/>
I am assuming you want to get the value of the Select Field. If so, you can get it by using its Id
const x = document.getElementById("connect");
console.log(x.value);
i would like to know is there a way to rearrange existing options based on boolean value ?
Example;
If matchtime===true, option['time'] must have priority in the options list
If matchquality===true, option['quality'] must also be priority in the options list
<form>
<select name="option_id" >
<option disabled selected value> -- select a category -- </option>
<optgroup label="Recommended">
<option disabled > ---- </option>
</optgroup> -->
<optgroup label="All Category">
<option id="time" value="time" >Time </option>
<option id="quality" value="Quality" >Quality</option>
<option id="management" value="management" >management</option>
</optgroup>
</select></form>
Javascript:
var sel=this.form.elements['option_id'];
var groups = sel.getElementById('optgroup');
groups=groups[0];
var opt=document.createElement('option');
opt.appendChild(document.createTextNode("newoptions"));
var matchtime=true;
var matchquality = false;
if(matchtime===true){
groups.appendChild(opt);
}
Extra:
I want to create an autosuggest category based on boolean value. If possible, i also want to label the options with the word "Recommended".
If not possible, i was thinking on arrange them using optgroup to separate options that its boolean value is true.
Reference link: https://www.dyn-web.com/tutorials/forms/select/option/dom-demo.php
I am new to javascript and cannot find an easy-to-understand answer.
I would like a certain value to get passed to a hidden field when a user selects a certain option from the select dropdown.
I know that there are if/else statements but I'm not sure if that would be used in this situation.
For example: I have a select dropdown of a list of states.
<select name="HomeState" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
As you can see, any option other than California will be rated at a value of 1.
I would like it to where if the user selects the option of California, then the value of $300 will get passed to a hidden form field.
<input name="AmountNeeded" type="hidden" value="300" />
If they select anything other than California, the hidden field would get passed $100
<input name="AmountNeeded" type="hidden" value="100" />
How would I implement this logic? Would it be using if/else statement? I am new and don't exactly know how to set that up.
To keep this simple you could assign ids to the <select> and hidden <input> and listen to the change event via onchange() on the <select> with a function call.
And based on the selected item, change the value of hidden input.
NOTE: To test the snippet out I have removed the type="hidden". Do place it back.
function homeSelected(){
const home = document.getElementById("homeSelector").value;
if(home == 5){
document.getElementById("amountNeeded").value = 300;
}else{
document.getElementById("amountNeeded").value = 100;
}
}
<select id="homeSelector" name="HomeState" onchange="homeSelected()" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
<input id="amountNeeded" name="AmountNeeded" value="100" />
You can do this as follows:
<select name="HomeState" required onChange=myFunction(this)>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
Javascript code is:
<script>
function myFunction(x) {
val = x.options[x.selectedIndex].text;
if(val == 'California')
document.getElementsByName("AmountNeeded")[0].value = 300
else
document.getElementsByName("AmountNeeded")[0].value = 100
}
</script>
If else statement is good for you if you are sure that All other states have value 1 except California. If all states may have different values like some states may have 1 or some may have 2 or some may have 3, then there may be other alternatives to solve this like you can pass give one more attribute data-src-amount to options and give amount to data-src-amount. You can create options like <option value="1" data-src-amount="100">Alabama</option> and in script, you can fetch data-src-amount on select change event instead of if-else statement.
I could not find any example that suite my problem. I would like to count selected variables from drop down menu using javascript.
My biggest concern is, these drop down menu values are dynamically retrieved from db.The drop down menu is generated multiple times depending on number of student displayed in the form.
This is the codes for drop down menu of examiner name:
<select id="examinerID" name="examinerID">
<option selected disabled>Examiners Name</option>
<%
try{
//connection
String query1="select lecturerID, lecturerFullname from lecturer ";
while(rs1.next())
{
%>
<option value="<%=rs1.getString("lecturerID") %>"><%=rs1.getString("lecturerFullname") %></option>
//close connection and exception
%>
</select>
This is how it actually looks like:
Below the form, I would like to add a list of the examiner (also retrieve from db) and I would like to count how many times an examiner has been selected.
Assume these are the value in drop down menu (to make it easy to understand):
<select id="examinerID" name="examinerID">
<option selected disabled>Examiners Name</option>
<option>Mark</option>
<option>Adam</option>
<option>Lucy</option>
<option>John</option></select>
Expected outcome of counting the selected examiner:
Mark: 2 //assuming Mark has been selected twice
Adam: 1
Lucy: 1
John: 0 //assuming John is not selected to be an examiner
Change Id to class as you are creating multiple instance of select.
For eg:
HTML:-
<select class="examinerID" name="examinerID">
<option selected disabled value="">Examiners Name</option>
<option value="Mark">Mark</option>
<option value="Adam">Adam</option>
<option value="Lucy">Lucy</option>
<option value="John">John</option>
</select>
<select class="examinerID" name="examinerID">
<option selected disabled value="">Examiners Name</option>
<option value="Mark">Mark</option>
<option value="Adam">Adam</option>
<option value="Lucy">Lucy</option>
<option value="John">John</option> </select>
<select class="examinerID" name="examinerID">
<option selected disabled value="">Examiners Name</option>
<option value="Mark">Mark</option>
<option value="Adam">Adam</option>
<option value="Lucy">Lucy</option>
<option value="John">John</option>
</select>
<select class="examinerID" name="examinerID">
<option selected disabled value="">Examiners Name</option>
<option value="Mark">Mark</option>
<option value="Adam">Adam</option>
<option value="Lucy">Lucy</option>
<option value="John">John</option>
</select>
JS:-
var count = {};
var selects = document.querySelectorAll("select[name=examinerID]");
for(var i=0;i<selects.length;i++){
selects[i].addEventListener("change",function(event){
count = {};
Array.prototype.forEach.call(selects, function(select, index) {
var selectedValue = select.value;
if(selectedValue != "")
count[selectedValue] = (count[selectedValue])?count[selectedValue]+1:1;
});
console.log(count)
});
}
Re your HTML:
<select id="examinerID" name="examinerID" onchange="checkLecturer()">
First, remove that id value. If you're outputting that in a loop (as your screenshot suggests), you're creating an invalid document, as id values must be unique.
If your goal is to get the value of the select that changed, pass this into your checkLecturer function:
<select name="examinerID" onchange="checkLecturer(this)">
<!-- Here ----------------------------------------^^^^ -->
...and then in checkLecturer, the first argument will be a reference to the select element:
function checkLecturer(select) {
// Use select.value or select.selectedIndex
}
If your goal is to access the values of all of the select boxes, you can find them with document.querySelectorAll:
var selects = document.querySelectorAll("select[name=examinerID]");
That will give you a NodeList, with a length telling you how many were found. You can access each one as though the NodeList were an array. So for instance, this will show the current value of each of them:
var selects = document.querySelectorAll("select[name=examinerID]");
Array.prototype.forEach.call(selects, function(select, index) {
console.log("#" + index + ": " + select.value);
});
(More on that odd-looking use of forEach in this answer on looping through arrays and array-like things such as NodeLists.)
I want someone to select an option, but not the first option -- Select --.
HTML
<select name = "sources" id = "brandname" required onblur = "selectText()" />
<option value = "select"> -- Select -- </option>
<option value = "referal"> Referal </option>
<option value = "justdial"> Justdial </option>
<option value = "sulekha"> Sulekha </option>
<option value = "website"> Website </option>
<option value = "others"> Others </option>
</select>
JS
if (document.getElementById("brandname").value == "select") {
alert("Please select the required value");
document.getElementById("brandname")[1].focus();
}
It executes the alert message, after that it moved to the next field. But it supposed to be sticked with that dropdown until and unless the select value changed to any other value.
What is wrong with the code?
Thanks in advance!
HTML
<select id="mySelect">
<option>v1</option>
<option>v2</option>
...
</select>
JavaScript
var s = document.getElementById("mySelect");
Check the selected value with
s.options[s.selectedIndex].value // Keep this in mind
If statement:
if(s.options[s.selectedIndex].value == "select") {
alert("A value is required!");
s.focus();
}
(Your focus without [1]:
document.getElementById("brandname").focus();
)
Demo
Just remove the [1] from the focus statement.As getElementById always returns single object.
var selectText =function(){
if(document.getElementById("brandname").value == "select") {
alert("Please select the required value");
document.getElementById("brandname").focus();
}}
<select name = "sources" id = "brandname" required onblur = "selectText()" />
<option value = "select"> -- Select -- </option>
<option value = "referal"> Referal </option>
<option value = "justdial"> Justdial </option>
<option value = "sulekha"> Sulekha </option>
<option value = "website"> Website </option>
<option value = "others"> Others </option>
</select>