I have drop-down box in loop. so I want to apply validation.
My Code is-
<select name="travelclasscmb[]" id="travelclasscmb">
<option value="">select</option>
<option value="1">Car</option>
</select>
<select name="travelclasscmb[]" id="travelclasscmb">
<option value="">select</option>
<option value="2">Train</option>
</select>
Try
$('select ').change(function () {
if (this.value === '') {
alert('select a value');
}
});
ID must be unique use classes instead .
Read Two HTML elements with same id attribute: How bad is it really?
Using jQuery Validator
$.validator.addMethod('notNone', function (value, element) {
return (value !== '');
}, 'Please select an option');
To start off, you can't have duplicate id's. Use a class instead.
For the validation you can use the required attribute:
<select name="travelclasscmb[]" class="travelclasscmb" required>
<option value="">select</option>
<option value="1">Car</option>
</select>
<select name="travelclasscmb[]" class="travelclasscmb" required>
<option value="">select</option>
<option value="2">Train</option>
</select>
Please use class for multiple select validation
<select name="travelclasscmb[]" class="travelclasscmb" required>
<option value="">select</option>
<option value="1">Car</option>
</select>
<select name="travelclasscmb[]" class="travelclasscmb" required>
<option value="">select</option>
<option value="2">Train</option>
</select>
**Jquery:**
$('.travelclasscmb').change(function () {
if (this.value === '') {
alert('select a value');
}
});
demo http://jsfiddle.net/kapil_dev/mdBtz/
Related
I have 3 dropdowns in a form:
<select id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<select id="2" required>
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select id="3" required>
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
I need the second and third dropdown to appear/disappear based on selection of the first dropdown. 2 and 3 have to be hidden on page load, or when value 3 is selected on dropdown 1, but not just hidden from view, rather completely non-existant. I say this because jquery .show and .hide only makes an element disappear from display, it still stays inside the code and because of the "required" attribute inside those hidden dropdowns, form cannot submit.
I have tried this as well as many other answers I found, but had no luck...
<script>
$("#1").change(function () {
if ($(this).val() == '1') {
$('#2').show();
$('#3').hide();
} else if ($(this).val() == '2') {
$('#3').show();
$('#2').hide();
} else {
$("#2").hide();
$('#3').hide();
}
})
</script>
Please help...
Edit:
Something along those lines:
<form id="form">
<select id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<div id="here">
<select id="2" required>
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select id="3" required>
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
</div>
</form>
$("#1").change(function () {
if ($(this).val() == '1') {
$('#2').appendTo( "#here" );
$('#3').remove();
} else if ($(this).val() == '2') {
$('#3').appendTo( "#here" );
$('#2').remove();
} else {
$('#2').remove();
$('#3').remove();
}
})
I am not very good at jquery. This does what I want, but only once. I dont know how to bring them back once removed. For example, if I selected from #1: 1(Car) and from #2: 1(Small Car), #3 will be removed. But if i now decide to choose another option on #1 nothing happens. Also, on load, all 3 are shown, I wanted to keep #2 and #3 hidden until an option on #1 is selected.
Here's one way to go about it. Instead of using numbers as ID's, why not use a data-attribute. Each time a select option is chosen the code will show the next one in the sequence.
$(document).ready(() => {
$('select[data-order=1]').show()
let selects = $('select[data-order]');
selects.change(function() {
// get number
let num = +$(this).data('order');
// show the next select and hide all selects after that
selects.each(function(i,o) {
let thisNum = +$(o).data('order');
if (thisNum === num + 1) $(o).show().val(''); // show and reset the value
else if (thisNum > num + 1) $(o).hide();
})
})
})
select[data-order] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<select data-order='1' id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<select data-order='2' id="2">
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select data-order='3' id="3">
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
</form>
I have a select option list for my form and I want to make sure the user has selected one of the options. My function logic implies that if the user keeps the dropdown on the default option, an alert will pop up prompting them to change it. However, no alert shows up whatsoever. What am I doing wrong?
function isOption(form) {
var type = form.getElementByID("pastimetype")
var selectedValue = type.options[type.selectedIndex].value;
if (selectedValue == "selectpastime") {
alert("Please select a pastime.")
return false
}
return true
}
<p><label for="pastime"> Favourite pastime: </label>
<select name="pastime" select id="pastimetype">
<option value="selectpastime">---Please choose an option---</option>
<option value="surfingtheweb">Surfing the Web</option>
<option value="playingsport">Playing Sport</option>
<option value="listeningtomusic">Listening to Music</option>
<option value="watchingtv">Watching TV</option>
<option value="playinggames">Playing Games</option>
<option value="communityservice">Community Service</option>
<option value="daydreaming">Daydreaming</option>
<option value="reading">Reading</option>
<option value="meditation">Meditation</option>
</select>
</p>
you need to add the function to the submit event of the form.
you misspelled getElementById
no need to use form.getElementById
easier to get the value using select.value
use preventDefault instead of returning true/false
Also
function isOption(e) {
var sel = document.getElementById("pastimetype");
var selectedValue = sel.value;
if (selectedValue == "") { // I removed the value from the "Please select"
alert("Please select a pastime.")
e.preventDefault(); // stop submission
}
}
window.addEventListener("load",function() {
document.getElementById("form1").addEventListener("submit",isOption)
})
<form id="form1">
<p><label for="pastime"> Favourite pastime: </label>
<select name="pastime" select id="pastimetype">
<option value="">---Please choose an option---</option>
<option value="surfingtheweb">Surfing the Web</option>
<option value="playingsport">Playing Sport</option>
<option value="listeningtomusic">Listening to Music</option>
<option value="watchingtv">Watching TV</option>
<option value="playinggames">Playing Games</option>
<option value="communityservice">Community Service</option>
<option value="daydreaming">Daydreaming</option>
<option value="reading">Reading</option>
<option value="meditation">Meditation</option>
</select>
</p>
<input type="submit" />
</form>
I've some selected input, that have the same options.
same class, different id for each select.
I've a function "onChange" event of each select, that give me the option selected.
How can I remove then this value from all the others select, without removing it where is selected, and how to revert it if is "de-selected".
many thanks
the code:
-if option two is selected, id like to remove it from all select but not where is selected-
[..........on same div....]
<select onchange="getval(this);" class="optionRisp form-control" id="select_1_1" style="">
<option value="">choose one node or leaf</option>
<option value="2">2</option>
</select>
<select onchange="getval(this);" class="optionRisp form-control" id="select_2_1" style="">
<option value="">choose one node or leaf</option>
<option value="2">2</option>
</select>
[..........on others div....]
<select onchange="getval(this);" class="optionRisp form-control" id="select_1_2" style="">
<option value="">choose one node or leaf</option>
<option value="2">2</option>
</select>
<scirp>
function getval(sel)
{
//remove option from list due selection
//sel is the element just selected!
}
</scirp>
You have to get all the selected values and store it on an array. Then you can use filter to hide those in array using includes
And i used jQuery $("select").change(.. coz it easier. :)
$(document).ready(function() {
$("body").on('change', '.optionRisp', function() {
var val = [];
//Get all selected
$('.optionRisp option:selected').each(function() {
if ($(this).val() != "") val.push($(this).val());
});
//Hide Selected
if ( $(this).val() != "" ) {
$(".optionRisp").not(this).find("option").show().filter(function() {
return $(this).val() != "" && val.includes($(this).val()) ? true : false;
}).hide();
} else {
$(".optionRisp").find("option").show().filter(function() {
return $(this).val() != "" && val.includes($(this).val()) ? true : false;
}).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="optionRisp form-control">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="optionRisp form-control">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="optionRisp form-control">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
I find it difficult to style and even add event listeners for the html select element.
Expected Behavior
I want to alert the text content of a select option.
This is the HTML code:
<select name="chooseSub" id="chooseSub" placeholder="Here we go">
<option value="makeChoice" id="disabled">--Make a choice-- </option>
<option value="ai" id="ai">Artificial Intelligence</option>
<option value="angularJs" id="angularJs">AngularJs</option>
<option value="css" id="css3">CSS3</option>
</select>
And this is the javascript code:
var select = document.getElementById('chooseSub');
select.addEventListener('click', function(event) {
if (event.target && event.target.nodeName === 'option') {
alert(event.target);
}
});
Actual Behavior
It does not do anything at all
Did you meen this?
var select = document.getElementById('chooseSub');
select.addEventListener('change', function(event) {
alert(event.target.selectedOptions[0].text);
});
<select name="chooseSub" id="chooseSub" placeholder="Here we go">
<option value="makeChoice" id="disabled">--Make a choice-- </option>
<option value="ai" id="ai">Artificial Intelligence</option>
<option value="angularJs" id="angularJs">AngularJs</option>
<option value="css" id="css3">CSS3</option>
</select>
function myFunction(opt){
alert(opt.options[opt.selectedIndex].text);
/*if you want value of selected option : alert(opt.options[opt.selectedIndex].value);*/
}
<select name="chooseSub" id="chooseSub" placeholder="Here we go" onChange='myFunction(this)'>
<option value="makeChoice" id="disabled">--Make a choice-- </option>
<option value="ai" id="ai">Artificial Intelligence</option>
<option value="angularJs" id="angularJs">AngularJs</option>
<option value="css" id="css3">CSS3</option>
</select>
How Can i specific require and unique condition for a list of select box like below?
<form name="signupForm" class="cmxform" id="signupForm" method="get" action="">
<select name="category[]" id="cat_1">
<option value="">Select One</option>
<option value="1">aa</option>
<option value="2">bb</option>
<option value="3">cc</option>
<option value="4">dd</option>
</select>
<select name="category[]" id="cat_2">
<option value="">Select One</option>
<option value="5">ee</option>
<option value="6">ff</option>
<option value="7">gg</option>
<option value="8">hh</option>
</select>
<select name="category[]" id="cat_3">
<option value="">Select One</option>
<option value="9">ii</option>
<option value="10">jj</option>
<option value="11">kk</option>
<option value="12">ll</option>
</select>
<input class="submit" type="submit" value="Submit">
</form>
Notice that there are the number of cat is not fixed, it can be more than 3,
so how to make it required for each selectbox,
and each selectbox chosen value must be unique using jquery validate plugin? Thank you
var $selects = $('form select[name^=category]'),
values = [];
$(':submit').click(function(e) {
e.preventDefault();
values = [];
$($selects).each(function() {
if($(this).val()) {
values.push($(this).val());
}
});
if(!values.length) {
alert('Please select all categories');
return false;
}
if(values.length < $selects.length || $.unique(values).length < $selects.length) {
alert('Please select all categories and be unique');
return false;
}
});
DEMO
Here is a great jQuery validation plugin that will make your life easier: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
This is all you need to do: (the plugin does the rest)
<select id="sport" class="validate[required]" name="sport">
<option value="">--Select--</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
Hope that helps :)