Require Select Not Allow First Option - javascript

Say we have the following:
<select name="select" required>
<option disabled selected value>Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button type="submit" name="submit">Submit</button>
I would like this field to be required but I do not want to allow the user to submit the first option (<option disabled selected value>Please Select Option</option>)
By default, the first option (<option disabled selected value>Please Select Option</option>) should be selected until the user changes the option.
I've tried doing Googling this problem but I'm only able to find different problems but not this particular one. My thoughts is that it would have to use Javascript to accomplish this but I would like to use an HTML option before going that route.
Thank you for help!

<select>
<option selected="true" style="display:none;">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>

Using JS
$("#clickButton").click(function (event) {
var picked = $('#selector option:selected').val();
if (picked == 0) {
alert("Please select any value");
} else {
console.log("Selected")
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector" name="select" required>
<option disabled selected value="0">Select</option>
<option>Data 1</option>
<option>Data 2</option>
<option>Data 3</option>
</select>
<button id="clickButton" type="submit" name="submit">Submit</button>

Much more complicated than the awesome witchcraft #Mr. HK showed, but another approach:
HTML:
<select id="selector" name="select" required>
<option disabled selected value="0">Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button id="mainButton" type="submit" name="submit">Submit</button>
JS:
$("#mainButton").click(function(event) {
var picked = $('#selector option:selected').val();
if (picked == 0){
alert("you must pick an option")
}
else{
//do whatever
}
})
See here: http://jsfiddle.net/ShL4T/105/

if you do not mind using php or javascript to validate the input of the select. tag.
here is a simple javascript verification:
function verify(){
var somevar = document.getElementById("select").value;
if(somevar == 'Please Select Option'){
document.getElementById("message").innerHTML = 'Invalid Choice, Please choose Option 1, 2, or 3';
}else{
//do whatever you want to do
}
}
<p id="message"></p>
<select name="select" id="select" required>
<option disabled selected>Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button type="submit" onclick="verify()" name="submit">Submit</button>

<form>
<select name="select" required>
<option disabled selected value>Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button type="submit" name="submit">Submit</button>
</form>

<select id="option" name="select" required>
<option disabled selected value="0">Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

Related

querySelectorAll to get selected values of dropdowns

I want to use querySelectorAll to get the selected values for multiple dropdowns on my page, then print them elsewhere on the page.
I'm struggling to find the right way to do this because they all have different names ('dropDown[0]' and 'dropDown[1]' ect). I can't change the naming convention, so i need to find a way of selecting all dropdowns that have 'dropDown' in the name, then print the values separated by a comma.
This is what i've tried so far:
const dropDowns = document.querySelectorAll('select[name="dropDown"]')
if (!dropDowns) return
this.dropDown = dropDowns.options[dropDowns.selectedIndex].text
this.dropDown.join(', ')
<div class="form-group">
<label for="dropDown1">Dropdown 1:</label>
<select name="dropDown[0]" id="dropDown1" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>
<div class="form-group">
<label for="dropDown2">Dropdown 2:</label>
<select name="dropDown[1]" id="dropDown2" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>
Use the ^= starts with selector and then map:
var res = [...document.querySelectorAll('select[name^="dropDown"]')].map(sel => sel.value)
Like this
const show = () => {
const res = [...document.querySelectorAll('select[name^="dropDown"]')].map(sel => sel.value);
document.getElementById("res").innerText = res.join(", ")
};
window.addEventListener("load", () => {
document.getElementById("container").addEventListener("change", e => {
const tgt = e.target;
if (tgt.classList.contains("form-control") && tgt.id.startsWith("dropDown")) { show ()}
});
show(); // init
})
<div id="container">
<div class="form-group">
<label for="dropDown1">Dropdown 1:</label>
<select name="dropDown[0]" id="dropDown1" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>
<div class="form-group">
<label for="dropDown2">Dropdown 2:</label>
<select name="dropDown[1]" id="dropDown2" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>
</div>
<span id="res"></span>
Older less elegant answer:
const onchange = () => {
var res = [];
[...document.querySelectorAll('select[name^="dropDown"]')].forEach(sel => res.push(sel.value) );
document.getElementById("res").innerText = res.join(", ")
}
[...document.querySelectorAll('select[name^="dropDown"]')].forEach(sel => sel.addEventListener("change",onchange));
onchange()
<div class="form-group">
<label for="dropDown1">Dropdown 1:</label>
<select name="dropDown[0]" id="dropDown1" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>
<div class="form-group">
<label for="dropDown2">Dropdown 2:</label>
<select name="dropDown[1]" id="dropDown2" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>
<span id="res"></span>
You can't use a regular expression in a selector but CSS selectors are powerful enough for your need with a "starts with" syntax inspired by regexes.
You can use a substring matching attribute selectors : select[name^=dropDown]
Reads "Nodes of type select with an attribute name starting with "dropDown"
From the formal specification:
[att^=val]
Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.
document.querySelectorAll('[name^="dropDown"]').forEach(function(node) {console.log(node.options[node.selectedIndex].value);});
You also can do something like this as you want to select the option's values:
var Container = document.querySelector('#output');
var Dropdowns = document.querySelectorAll('select');
// Select All Options Values:
for ( var dropdown in Dropdowns ) {
for ( var i = 0; i < Dropdowns[dropdown].children.length; i++ ) {
var elem = document.createElement('p');
elem.innerHTML = Dropdowns[dropdown].children[i].value;
Container.appendChild(elem);
}
}
<select>
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
<option value="4">Number 4</option>
</select>
<select>
<option value="5">Number 5</option>
<option value="6">Number 6</option>
<option value="7">Number 7</option>
<option value="8">Number 8</option>
<option value="9">Number 9</option>
</select>
<div id="output"></div>
Just an example for doing this.

I want to select same option from drop list multiple data using javascript

I want to select same option from drop list in multiple data using javascript. please help. Screenshot attached for refference
I guess this is what you want to know.
"How to change selected value of multiple select dropdowns using js/jquery"
Here is a sample code.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="selectv3">Select Value 2 on all</button>
<br>
<br>
<select id="select1">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
<br>
<select id="select2">
<option value="value1" selected>Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select>
<br>
<select id="select4">
<option value="none"></option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select>
<br>
<script>
$(document).ready(function(){
jQuery("#selectv3").click(function() {
jQuery("select").val("value2");
});
});
</script>
</body>
</html>

Show submit button on multiple forms only if option selected

I need to show the submit button on many forms on the same page only if one option from a select is selected.
I have:
<form id="1">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
and
<form id="2">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
so, I need to show the submit button only if an option of the select is selected
Thanks!!!
This a working example with you html http://jsfiddle.net/g188o5eg/
$('select').on('change', function(){
if($(this).val() != ''){
$(this).parent().find('input[type="submit"]').show();
} else {
$(this).parent().find('input[type="submit"]').hide();
}
});
It will work with all forms on your site :)
Try something like this (would work with multiple select boxes (uses the nearest submit):
<form>
<input type="text">
<select class="select">
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit" class="submitbutton">
<script type="text/javascript">
$('.submitbutton').hide();
$('.select').click(function() {
$(this).closest('.submitbutton').show();
});
</script>

jquery .html() not getting latest selected value

jquery .html() not getting latest selected value, code here
<div id="testDiv">
<select id="mySel">
<option value="1">opt 1</option>
<option selected value="2">opt 2</option>
<option value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
</div>
and script
$(document).ready(function(){
$('#mySel').val('3');
var divContent = $('#testDiv').html();
alert(divContent);
});
getting an output like this
<select id="mySel">
<option value="1">opt 1</option>
<option selected value="2">opt 2</option>
<option value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
'selected' not getting changed, i need output like this
<select id="mySel">
<option value="1">opt 1</option>
<option value="2">opt 2</option>
<option selected value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
$(document).ready(function(){
$('#mySel').val('4');
$("#mySel").find('option').removeAttr("selected");
$("#mySel option[value='4']").attr("selected","selected");
var divContent = $('#testDiv').html();
alert(divContent);
});
Output:
<select id="mySel">
<option value="1">opt 1</option>
<option value="2">opt 2</option>
<option value="3">opt 3</option>
<option selected="selected" value="4">opt 4</option>
</select>
For your desired output you will need to add a script to move the selected attribute to the correct <option> when the user changes the value. By default the select list will not modify your markup based on the user's actions.

Dropdown form with submit button

I have a dropdown with links in them, when I select the option it will go to the page, but I want to use a button instead but not sure how to change the javascript to make this happen:
<select name="form" onchange="location = this.options[this.selectedIndex].value;"class="form-control">
<option>Choose a Service</option>
<option value="http://www.google.com">Option 1</option>
<option value="http://www.google.com">Option 2</option>
<option value="http://www.google.com">Option 3</option>
<option value="http://www.google.com">Option 4</option>
<option value="http://www.google.com">Option 5</option>
</select>
Instead of putting location = this.options[this.selectedIndex].value in unChange, move it to a button onClick event:
<select id="dropdown" name="form" class="form-control">
<option>Choose a Service</option>
<option value="http://www.google.com">Option-1</option>
<option value="http://www.google.com">Option-2</option>
<option value="http://www.google.com">Option-3</option>
<option value="http://www.google.com">Option-4</option>
<option value="http://www.google.com">Option-5</option>
</select>
<input type="button" value="Go!" onClick='location = document.getElementById("dropdown").options[document.getElementById("dropdown").selectedIndex].value'>
<select id="dd" name="form">
<option>Choose a Service</option>
<option value="http://www.google.com">Option 1</option>
<option value="http://www.google.com">Option 2</option>
<option value="http://www.google.com">Option 3</option>
<option value="http://www.google.com">Option 4</option>
<option value="http://www.google.com">Option 5</option>
</select>
<button onClick="launchPage" >
<script>
var launchPage = function() {
var e = document.getElementById("dd");
var url = e.options[e.selectedIndex].value;
window.open(url);
};
</script>

Categories

Resources