So I have 3 select boxes and a submit button. If no value has been selected in any of the select boxes nothing happens when the submit button is clicked. If values have been selected in all 3 of the select boxes then clicking on the submit button refreshes the page with a 2 second delay.
Here's what I have so far that doesn't work:
HTML
<select class="select1" name="select1">
<option value="0">-- Please Select --</option>
<option value="5">Blue</option>
<option value="6">Green</option>
<option value="7">Red</option>
</select>
<select class="select2" name="select2">
<option value="0">-- Please Select --</option>
<option value="5">big</option>
<option value="6">small</option>
<option value="7">medium</option>
</select>
<select class="select3" name="select3">
<option value="0">-- Please Select --</option>
<option value="5">1</option>
<option value="6">2</option>
<option value="7">3</option>
</select>
<input type="submit" value="something1" name="something2" onclick="refresh(2000)" class="something3" id="something4">
JS
if($(".select1" && ".select2" && ".select3")).value !== "0") {
function refresh (timeoutPeriod){refresh = setTimeout(function(){window.location.reload(true);},timeoutPeriod);}
}
But the problem Im having here as well is that refresh would not be defined is the statement is not true(onload etc). I have looking around for a couple of hours and can't really find much, or maybe im not doing something right. Any help or guidance would be appreciated.
There's a few problems with your current code:
Incorrect use of jQuery Selectors $(".select1" && ".select2"..
jQuery Selectors use CSS like selector texts, to collect multiple rules
Because it's three different values you're checking, you'd have to check each
one.
Scoping and placement of function refresh() is ambiguous and uncalled.
jQuery doesn't have a .value property, you'd have to call it via .val() for jQuery objects.
<script>
function refresh() {
if( $(".select1 option:selected").val() !== "0" &&
$(".select2 option:selected").val() !== "0" &&
$(".select3 option:selected").val() !== "0" ) {
setTimeOut(function(){
window.location.reload();
}, 2000 );
}
}
</script>
You want a more elegant solution?
HTML:
<select class="select1" onchange="handleChange($(this))">
<option value="0">-- Please Select --</option>
<option value="5">Blue</option>
<option value="6">Green</option>
<option value="7">Red</option>
</select>
<select class="select2" onchange="handleChange($(this))">
<option value="0">-- Please Select --</option>
<option value="5">big</option>
<option value="6">small</option>
<option value="7">medium</option>
</select>
<select class="select3" onchange="handleChange($(this))">
<option value="0">-- Please Select --</option>
<option value="5">1</option>
<option value="6">2</option>
<option value="7">3</option>
</select>
<input type="submit" onclick="tryRefresh(2000)">
JS
var selected = 0;
function handleChange($select) {
$select.val() ? selected++ : selected--;
}
function tryRefresh(delay) {
if (selected === 3) {
setTimeout(refresh, delay);
}
}
function refresh() {
window.location.reload(true);
}
You are wrong at a place,
if($(".select1" && ".select2" && ".select3")).value !== "0") {
function refresh (timeoutPeriod) {
refresh = setTimeout(function() {
window.location.reload(true);
},timeoutPeriod);
}
}
This won't work. In computer language, you need to check one condition, then move on to the other.
The condition you are using would work if all the operators were bool such as
if((bool1 && bool2 && bool3) {
/* code executes if all three bools are true!
*/
}
So what you need is, this:
if($('.select1'.val() != '0' &&
'.select2'.val() != '0' &&
'.select3'.val() != 0)) {
function refresh (timeoutPeriod) {
refresh = setTimeout(function() {
window.location.reload(true);
}, timeoutPeriod);
}
}
This way, you will first check the select1 then select2 and then the last one, if they all don't have the 0 value. then the function will continue. Otherwise it will stay as it is.
Here is a fiddle for the algorithm: http://jsfiddle.net/afzaal_ahmad_zeeshan/tSDKN/2/
I am sorry, I have short time left to pray! So you can get the basic code from fiddle :) I have explained how the select works there.
Good luck brother.
Related
Good day
I require some aid with this issue.
I have a "Location1" dropdown with about 10 options. I then have a div class I would like to show if the user selects "Other".
Code:
<script>
$(document).ready(function(){
$("#Location1").on('change' function(){
if (this.value == 'Other') {
$(".otherlocation1").show();
}
else {
$(".otherlocation1").hide();
}
});
});
</script>
It's supposed to hide div class "otherlocation1" on by default, and then show "otherlocation1" based on a selection from the "Location1" text box.
Only problem is, it's not working. I've tried numerous other ways and can't get it working.
Any help would be appreciated.
You are missing a , after change. Try this:
$(document).ready(function() {
$("#Location1").on('change', function() {
if (this.value == 'Other') {
$(".otherlocation1").show();
} else {
$(".otherlocation1").hide();
}
});
});
.otherlocation1{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='Location1'>
<option disabled selected>Select an option</option>
<option value='Other'>Other</option>
<option value='Other 2'>Other 2</option>
<option value='Other 3'>Other 3</option>
<option value='Other 4'>Other 4</option>
<option value='Other 5'>Other 5</option>
</select>
<p class='otherlocation1'>otherlocation1</p>
In Jquery the on function takes two parameters.
events
handler
So when you call the on function you pass the event and the handler separated by a comma ',' . Refer this for more info.
Thus refactor your line as follows
$("#Location1").on('change', function()
Im new to this so apologies if my question is not presented as it should be.
Basically, my aim is with jQuery is to make it so that when the field called 'Apple' is selected from the first dropdown box, the second dropdown box will only allow the field 'Firm' to be selected and the other two be disabled. However if any of the other fruits other than 'Apple' is selected from the first dropdown box then all of the options in the second dropdown box (texture dropdown) will be available to be chosen.
I have looked all over the internet for jQuery code to help me with this issue but as I am new to jQuery I have difficulty finding the solution I need.
Here is my HTML code:
<div class="ingredients_div">
<select name="ingredients_form" id="ingredients_form_1">
<option value="Apple" selected="">Apple</option>
<option value="Orange">Orange</option>
<option value="Lemon">Lemon</option>
<option value="Mango">Mango</option>
</select>
</div>
<div class="texture_div">
<select name="texture_form" id="texture_form_1">
<option value="Firm" selected="">Firm</option>
<option value="Soft">Soft</option>
<option value="Blended">Blended</option>
</select>
</div>
Many thanks
please check this code , i think it works for you.
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Apple</option>
<option value="2">Orange</option>
<option value="3">Lemon</option>
</select>
<select name="select2" id="select2">
<option value="1">Firm</option>
<option value="2">Soft</option>
<option value="3">Blended</option>
</select>
To achieve what you mentioned, you need to use jQuery's event binding on the first select box. As soon as the value is changed, you need to write logic to enable/disable options in the second select box as per the value changed in the first box.
Here is how you can achieve it.
$("#ingredients_form_1").change(function() {
if ($(this).val() === "Apple") {
$("#texture_form_1 option").prop("disabled", true);
$("#texture_form_1 option[value='Firm']").prop("disabled", false);
} else {
$("#texture_form_1 option").prop("disabled", false);
}
});
Please go through jQuery's documentation to know more about selectors, event binding, and most importantly, in the next post, include what you've achieved till then.
I have a select box on a web form that, depending on what is selected, will show a hidden div.
<script>
$(document).ready(function () {
$("#Select1").change(function () {
$(this).find("option:selected").each(function(){
if($(this).attr("Value")=="2"){
$("#hiddentable11").show();
}
else if($(this).attr("Value")=="3"){
$("#hiddentable11").show();
}
else{
$("#hiddentable11").hide();
}
});
}).change();
});
</script>
The form will have 35 to 40 of these Select box/hidden div combinations. The option values in the select boxes will all be the same every time (0,1,2,3,4). If the user chooses option 2 or 3 for Select1, hiddentable11 appears. If they choose option 2 or 3 for Select2, hiddentable 12 appears I don't want to copy/paste this code 40 times and in the code change Select1/hiddentable11 to Select2/hiddentable12, Select3/hiddentable13 etc. How do I change this code so that I can reuse it for all of the select/div combinations?
Give all the select boxes a class, e.g. class="select". Then you can usethis.id` to get the ID of the target element, and concatenate it to the DIV id.
$(".select").change(function() {
var num = this.id.slice(6); // get N from id="SelectN"
$("#hiddentable1" + num).toggle($(this).val() == "2" || $(this).val() == "3"));
});
Then just make a .Select class, and use this, pass in the corresponding hidden table as a user defined unique data attribute (I'll use data-hidden as an example). Then you can create the proper selector for each item by doing "#"+$(this).attr("data-hidden"):
$(".Select").change(function () {
$(this).find("option:selected").each(function(){
if($(this).attr("Value")=="2") {
$("#"+$(this).attr("data-hidden")).show();
}
else if($(this).attr("Value")=="3") {
$("#"+$(this).attr("data-hidden")).show();
}
else {
$("#"+$(this).attr("data-hidden")).hide();
}
});
}).change();
Try this. With this you don't need to depend on ID's. You may multiple select boxes to your code and table combo and never have to change your js code.
<select id="select1">
<option val="0">0</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<div id="hiddentable11">
Hidden Contents of Select1
</div>
<select id="select2">
<option val="0">0</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<div id="hiddentable12">
Hidden Contents of Select2
</div>
<select id="select3">
<option val="0">0</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<div id="hiddentable13">
Hidden Contents of Select3
</div>
$("select").change(function () {
var index = $('select').index($(this));
index++;
var $this = $(this).find("option:selected").val();
$("#hiddentable1" + index).css("display", $this === "2" || $this === "3" ? "inline-block" : "none");
});
http://jsfiddle.net/njzatgku/1/
I have 4 dropdowns from which you have to select an option.
What I am trying to do is show an alert if you chose the same option more than once. Its purpose is to keep the score for a game so a person shouldn't be able to play as 2.
At the moment the dropdown looks like this:
<select id="users_1" aria-labelledby="dropdownMenu1">
<option>Select player</option>
<?php foreach($users as $user) : ?>
<option value="<?=$user['id_user']?>"><?=$user['nume']?></option>
<?php endforeach; ?>
</select>
And what I've tried to do in JQuery is this:
$("#users_2").change(function() {
var a=$(this).val("#users_1");
var b=$(this).val("#users_2");
if(a == b) {
alert($(this).val());
}
});
And I also tried to compare them like this:
$("#users_2").change(function() {
if($(this).val() == $("#users_1").val()) {
alert($(this).val());
}
});
None seems to work and I have no clue why. I've checked and the actual values are taken from the view but the if clause cannot compare them apparently.
Thank you for any help! Much appreciated!
Get your values, don't set them
Change this…
$("#users_2").change(function() {
var a=$(this).val("#users_1");
var b=$(this).val("#users_2");
if(a == b) {
alert($(this).val());
}
});
…to this…
$("#users_2").change(function() {
var a = $("#users_1").val();
var b = $(this).val(); // equivalent to $("#users_2").val()
if(a === b) { // Use strict comparison operator as a best practice
alert(a + ' matches ' + b);
}
});
Make it dynamic
You can take it a step farther by listening to a set of elements and making your handler dynamic:
// Listen to set of all select elements.
$('select').on('change', function(e) {
// Serialize form values.
var vals = $('#select_player').serializeArray();
// Convert to simple array of just values.
vals = $.map(vals, function (val, i) {
return val.value;
});
// Remove current selection from array…
vals.splice(vals.indexOf($(this).val()), 1);
// …then check to see if it's value was already there.
if(vals.indexOf($(this).val()) !== -1) { // If value is found,
// …reset current select element to default option,
$(this).val('default');
// …and alert user with a relevant message.
alert('You cannot select this player more than once.');
};
});
label {
display: block;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="select_player" name="select_player">
<label>Player 1:
<select id="users_1" name="users_1">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 2:
<select id="users_2" name="users_2">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 3:
<select id="users_3" name="users_3">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 4:
<select id="users_4" name="users_4">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
</form>
I used the same class on all the dropdowns and then use only one event handler.
$('.dropdown').on('change', function (event) {
var selectedValue = $(event.currentTarget).val();
var matchedDropdowns = $('.dropdown').filter(function (index) {
return $(this).val() === selectedValue;
});
if (matchedDropdowns.length > 1) {
alert("Alert Alert!")
}
})
In the event handlers I can get the selected value, filter all the dropdowns that match that value and if I get more than 1 dropdown I will just show the alert.
You can check it on fiddle.
My website is created in ASP classic - VBScript (not my choice and is a language I've not had experience with before this). I'm trying to create a webpage where in it: A dropdown menu reveals an additional dropdown based on what was selected in the first one. I'm trying to use a javascript function to achieve this.
Example:
In the first dropdown the user chooses ice cream or crisps.
Based on what the user selects another dropdown gives the choice of flavour.
Ice cream: vanilla, chocolate, mint.
Crisps: ready salted, cheese & onion, salt & vinegar.
This is what my code currently looks like:
HTML
<select id="food" onchange="fctCheck(this.value)">
<option value="">Choose an item</option>
<option value="icecream">Ice cream</option>
<option value="crisps">Crisps</option>
</select>
<select id="icecream" style="display:none">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="mint">Mint</option>
</select>
<select id="crisps" style="display:none">
<option value="readysalted">Ready Salted</option>
<option value="cheeseandonion">Cheese and Onion</option>
<option value="saltandvinegar">Salt and Vinegar</option>
</select>
.
javascript
function fctCheck(food)
{
if (food == "")
{document.getElementById(food).style.display = "none";}
else
{document.getElementById(food).style.display = "block";}
}
as mentioned by st3inn this.value is absolutely fine - there is just the typo by document.getElement==>B<==yId.
But your code has the disadvantage, that a user could select both options and so both sub-selections would be visible.
You could avoid this by first hiding all sub-selections before showing the one for the selected item. This could be done that way (via the addiotional name-attribute, or, if you choose to work with jQuery you could do something more sophisticated instead):
Example (with comments) on JSFiddle
Javascript:
function fctCheck(food) {
var elems = document.getElementsByName("subselector");
for (var i = 0; i < elems.length; i++) {
elems.item(i).style.display = "none";
}
document.getElementById(food).style.display = "block";
}
HTML:
<select id="food"onchange="fctCheck(this.value);">
<option value="">Choose an item</option>
<option value="icecream">Ice cream</option>
<option value="crisps">Crisps</option>
</select>
<select id="icecream" name="subselector" style="display:none">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="mint">Mint</option>
</select>
<select id="crisps" name="subselector" style="display:none">
<option value="readysalted">Ready Salted</option>
<option value="cheeseandonion">Cheese and Onion</option>
<option value="saltandvinegar">Salt and Vinegar</option>
</select>
Cheers,
Florian
You need to check for option value instead:
fctCheck(this.options[ this.options.selectedIndex ].value)
this.options is collection of <option> elements inside your current <select>, and this.options.selectedIndex is integer value that show what option currently selected.
BTW you have an typo in your code:
document.getElementbyId
should be
document.getElementById
See jsFiddle demo
You just have a typo.
function fctCheck(food)
{
if (food == "") {
document.getElementById(food).style.display = "none";}
} else {
document.getElementById(food).style.display = "block";
}
}
should work.
this.value
is equivalent to
this.options[this.options.selectedIndex].value