Been having lot's of trouble with this one. Let's say I had the following html:
<div id='step_1'>
<select name='select_1' id='choose'>
<option value='select one'>Select One</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<select name='select_2' id='choose_again'>
<option value='select one'>Select One</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<button id='submit'>button</button>
</div>
I have many of these, so what I'm trying to do is return false if ANY 'select' has the value of 'Select One' then alert them. The jQuery i have so far looks as so:
$('#submit').click(function() {
if ($('#step_1 select[value="select one"]').length() == 0) {
//succeed
} else {
alert('Please select yes or no!');
return false;
}
});
What am I doing wrong? Thanks in advance, I love this website! :)
$('#submit').click(function(e) {
var flag = true;
$('select').each(function(){
if($(this).val() == "select one"){
alert("please select a value in " + $(this).attr("name"));
flag = false;
}
});
if(flag){
alert('perfect');
}else{
e.preventDefault();
}
});
EXAMPLE : http://jsfiddle.net/raj_er04/3kHVY/1/
Quick note: If you want the alert to only show once rather than once per each 'select one', simply move the alert() into the else{ statement. thanks again for this answer!
You can do this with $.each():
$('#step_1').find('SELECT').each( function() {
if( $(this).val() === 'select one' ) {
alert('Please select yes or no!');
return false;
}
});
Note that returning false will prevent the loop from continuing once a missing field is found.
Your test fails because length is not a method. It is a property. Remove the (). If you look in your debugger you should see a warning about this.
Also, your selector should be checking the selected option, not the select list itself.
http://jsfiddle.net/7PPs4/
$('#submit').click(function() {
$foo = $('#step_1 select option:selected[value="select one"]');
alert($foo.length);
});
Related
i am creating two dropsdowns like this
var drp_nt = $('<select />', {
'id' : 'drp_' + nt,
'name' : 'drp_' + nt+'[]',
on: {
change: check_data
},
'multiple': true});
var drp_cnt = $('<select />', {
'id' : 'drp_' + cnt,
'name' : 'drp_' + cnt+'[]',
on: {
change: check_data
},
'multiple': true});
Now i am defining the check_data_function like this
function check_data()
{
if($("select option:selected").length==2)
alert('Two Dropdown Selected');
else
alert($("select option:selected").length);
}
I want to enable a button when both of the dropdown has some of the options selected.
in the above fragment of the code, the problem is, if i select 2 options from dropdown drp_nt, and select no option from drp_cnt, then also the alert 'Two Dropdown Selected' is taking place.
I want to have the alert 'Two Dropdown Selected' take place when both of the dropdowns will have some options selected. If one is having something selected while the other one don't, then the alert 'Two Dropdown Selected' won't take place
How can i achieve this?
This will do the trick:
function check_data() {
if ($('select option:selected').parent().length == 2) {
alert('Two Dropdown Selected');
}
}
The idea is that you still select selected options, but then you get their parent select elements and verify that there are exactly two of them.
Check the demo below.
$('select').change(check_data);
function check_data() {
if ($('select option:selected').parent().length == 2) {
alert('Two Dropdown Selected');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
<option>Text 1</option>
<option>Text 2</option>
<option>Text 3</option>
<option>Text 4</option>
</select>
<select multiple>
<option>Text 1</option>
<option>Text 2</option>
<option>Text 3</option>
<option>Text 4</option>
</select>
you are selecting both dropdown in jquery using select
**
function check_data()
{
if($("select option:selected").length==2)
alert('Two Dropdown Selected');
else
alert($("select option:selected").length);
}
**
$('select') will select both dropdown. So when you check in jquery, after you selected two in one drop down, this will give you result as two selected. So you need to check like following
function check_data()
{
if($("#id1 option:selected").length>1 && $("#id2 option:selected").length>1)
alert('Two Dropdown Selected');
else
alert('select any one of the option from both dropdown');
}
You can do this by filtering the list of selects so that you get only those with options selected and then check the length
$(function(){
$(document).on('change','select',function(){
var selectsWithOptionsSelected = $('select').filter(function(){
return $('option:selected',this).length>0;
});
alert(selectsWithOptionsSelected.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select rows="3" multiple>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select rows=3 multiple>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
You may want to fiddle with the selectors to only target the select instances you're interested in, for example you could give them a class and use that in both selectors (select.myClassName)
Use jQuery().each
function check_data()
{
var counter = 0;
jQuery('select').each(function() {
if(jQuery(this).find('option:selected').length == 2) {
counter++;
}
});
if(counter == jQuery('select').length)
alert('Two Dropdown Selected');
else
alert($("select option:selected").length);
}
Here's another alternative just for giggles:
function check_data() {
$('select:has(option:selected)').length > 1 && alert('Foo');
}
have this code, i want to convert it to be able to allow the user to pick ANY possible select and have div [id='setprice'] show up or something to that effect. currently i have 4 options, but it could be up to 10+ depends on how many are in the database. but it shouldn't matter, i just want which ever gets selected to open the setprice div. Thanks.
$("#category").change(function () {
$("#setprice").hide();
if ($(this).val() == "cow") { $("[id='setprice']").show(); }
else if ($(this).val() == "dog") { $("[id='setprice']").show(); }
else if ($(this).val() == "monkey") { $("[id='setprice']").show(); }
else if ($(this).val() == "kungfoo") { $("[id='setprice']").show(); }
});
HTML
<select id="category">
<option value=''>Select</option>
<option value='cow'>Cow</option>
<option value='dog'>Dog</option>
<option value='monkey'>Monkey</option>
<option value='kungfoo'>kungfoo</option>
</select>
<div id='setprice'>this is hidden onload, then shows on any #category selection</div>
Seems to be alot of cofusion in what im asking, These options i've given are random names, the categories that are going to be loaded, are from a database and more could be added depending how it expands, so i want the script to not show div=setprice, but when anything gets selected in #category to open setprice.
You will need to call the function only when the value of the select box isn't empty.
$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});
Here is a working fiddle.
This is the cleanest you will get this.
DEMO
$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});
The $("#setprice").toggle(!!this.value); is just a way to use a boolean inside the .toggle() method,
otherwise you do it equally like:
var $setPriceEl = $("#setprice");
$("#category").change(function () {
$setPriceEl.hide(); // hide by default
if(this.value) $setPriceEl.show(); // show only if has value
});
or even:
$("#category").change(function () {
$("#setprice")[this.value ? "show" : "hide" ]();
});
Please find the answer below ...
HTML :
<select id="category">
<option value=''>Select</option>
<option value='cow'>Cow</option>
<option value='dog'>Dog</option>
<option value='monkey'>Monkey</option>
<option value='kungfoo'>kungfoo</option>
</select>
<div id='setprice' style="display:none;">this is hidden onload,
then shows on any #category selection</div>
JQUERY :
$(document).ready(function(){
$("#category").change(function() {
$("#category option:selected" ).each(function() {
var str = $( this ).text();
if(str == "Select"){
$("#setprice").hide();
}else{
$("#setprice").show();
$("#setprice").text(str);
}
});
}).trigger("change");
});
I want to disable the select box if Free Shipping is available.
<select name="shipping_method" id="shipping_method">
<option value="">Select shipping</option>
<option value="free_shipping">Free Shipping</option>
<option value="international_delivery">International: $30.00</option>
</select>
I've tried this (without knowing if it would work):
$(document).ready(function(){
if($("option").val() == "free_shipping") {
$("select").prop("disabled");
}
});
And then assuming on form submit:
$(document).ready(function(){
$("form").submit(function() {
$("select", this).prop("disabled", false);
});
});
You can use $.has
$('#shipping_method').has('option[value="free_shipping"]').prop("disabled", true);
Demo: Fiddle
select the select
$('#shipping_method').change(function(){
var j = $(this);
if(j.val() == 'free_shipping') {
j.attr('disabled', true);
}
else {
j.removeAttr('disabled');
}
}).trigger('change');
This is a follow up question. I am trying to get a input box to be hidden when a pull-down menu has the value "tid and acc". I am at a loss why this code isn't working, any help would much appreciated! Here is a link on jfiddle: http://jsfiddle.net/Mm7c7/
<script>
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Your script is being evaluated before your element is ready. Placing the script in a $(document).ready() or after the content it affects will solve the problem
http://jsfiddle.net/Wx8Jf/2
$(document).ready(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
});
Couple problems:
You'll either need to wrap the function in $(function(){}) to ensure DOM is ready, or drop it below your HTML (the former is recommended). If you don't wrap it (or drop it), then the script is executed before the elements have actually been rendered, causing $('#rule-type') to be undefined.
Your logic is incorrect (according to your explanation). Your current logic says to hide the input box when anything other than tid and acc is selected.
Working version:
<script>
$(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').hide();
}
else {
$('#tid-acc').show();
}
});
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc" />
http://jsfiddle.net/dbrecht/QwkKf/
Take a look here for a working sample: http://jsfiddle.net/Mm7c7/1/
HTML:
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Javascript:
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
I am using a selectbox:
<select name="priority" id="priority">
<option value="4">Low</option>
<option value="3" selected="selected">Normal</option>
<option value="2">High</option>
<option value="1">Emergency</option>
</select>
When user select "Emergency", then a confirmation box opens and if user confirm, then "Emergency" is selected. Otherwise "Normal" should be selected. For This, I am using jquery:
$(document).ready(function() {
$('#priority').change(function(){
if($(this).val()=='1'){
if(confirm("Are you sure this is emergency?")){
return true;
}
else{
//here some code is needed to select "Normal".
}
}
});
});
Now, How can I do that?
Since you're just returning in the confirmation case, you can shorten your logic down to this:
$(function() {
$('#priority').change(function(){
if($(this).val()=='1' && !confirm("Are you sure this is emergency?")){
$(this).val('3');
}
});
});
You can give it a try here.
else{
$(this).find("option[value=3]").attr("selected","selected");
//and trigger change after that if you need it
$(this).change();
}
The following code snippet should do what you are after - it selects the priority select element by ID and then sets the selected value to 3.
else
{
$('#priority').val(3);
}