Pass multiple select values to a function to update an image

Pass multiple select values to a function to update an image - javascript

I want to change an image depending on what two select values have been chosen. How would this be done dynamically with two separate select? Here's my code so far.
Html
<img class="prime" src="images/image_small.jpg">
<form>
Select image size:
<select onchange="twoselects(this)">
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
</form>
Select image size:
<select onchange="twoselects(that)">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<p id="optimus"></p>
Javascript
function twoselects(val, val2) {
// Not sure why you used this line
var image = document.querySelector(".prime").value;
var getValue = val.value;
var getValue2 = val2.value;
if (getValue == "opt1" && "option1") {
document.getElementById('optimus').style.backgroundImage= "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
}
else if (getValue == "opt2" && getValue2 == "option2") {
document.getElementById('optimus').style.backgroundImage= "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}

You are sending one argument but accepting 2..i would suggest you not to send and accept any. Select elements using getElementById or querySelector
that in provided example is undefined.
function twoselects() {
var size1 = document.querySelector("#size1");
var size2 = document.querySelector("#size2");
var getValue = size1.value;
var getValue2 = size2.value;
if (getValue == "opt1" && getValue2 == "option1") {
document.getElementById('optimus').style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
} else if (getValue == "opt2" && getValue2 == "option2") {
document.getElementById('optimus').style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}
twoselects();
p {
width: 100%;
height: 200px;
}
<img class="prime" src="images/image_small.jpg">
<form>
Select image size:
<select id='size1' onchange="twoselects()">
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
</form>
Select image size:
<select id='size2' onchange="twoselects()">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<p id="optimus"></p>

Related

I am trying to change the background image as soon as the respective option is selected from the select drop down list. but this is not happening

function bgimg() {
var ch = document.getElementById("country").value;
if (ch == "None") {
document.getElementById("bgi").style.background = "black";
} else if (ch == "India") {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/5770.jpg')";
} else if (ch == "USA") {
document.getElementById("bgi").style.backgroundImage = "url('Usa.jpghttps://wallpaperaccess.com/full/52904.jpg')";
} else if (ch == "Japan") {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/6512.jpg')";
} else {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpapercave.com/wp/wp1833702.jpg')";
}
}
<h1 align="center" style="font-family: umpush;">WELCOME TO INTERACTIVITY</h1>
<div id="bgi"></div>
<select id="country" onchange="Javascipt: bgimg()">
<option value="None">None</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Israel">Israel</option>
<option value="Japan">Japan</option>
</select>
/* I am trying to change the background image as soon as the respective option is selected from the select drop down list. but this is not happening.
OUTPUT: No background is being shown after choosing the options */

The Javascript code was put into the css textarea. And there were some typos in your code ("Javascipt" and a wrong image url).
Also he backgrounds were set on an empty div without any styling, which results in not seeing them. I have added a height and width on it so that you can at least see the backgrounds. Furthermore I called the function at the start so that it will set the background for the initial value (which is "None" so the background becomes black)
function bgimg() {
var ch = document.getElementById("country").value;
if (ch == "None") {
document.getElementById("bgi").style.backgroundColor = "black";
} else if (ch == "India") {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/5770.jpg')";
} else if (ch == "USA") {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/52904.jpg')";
} else if (ch == "Japan") {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/6512.jpg')";
} else {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpapercave.com/wp/wp1833702.jpg')";
}
}
bgimg();
#bgi {
height: 200px;
width: 300px;
background-size: cover;
}
<h1 align="center" style="font-family: umpush;">WELCOME TO INTERACTIVITY</h1>
<div id="bgi"></div>
<select id="country" onchange="Javascript: bgimg()">
<option value="None">None</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Israel">Israel</option>
<option value="Japan">Japan</option>
</select>

You can also add an event listener for change on Javascript if you want. Also, do not forget to give the #bgi div a width and height on CSS otherwise it won't show.
<h1 align="center" style="font-family: umpush;">WELCOME TO INTERACTIVITY</h1>
<div id="bgi"></div>
<select id="country">
<option value="None">None</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Israel">Israel</option>
<option value="Japan">Japan</option>
</select>
const select = document.querySelector("#country");
select.addEventListener('change', (event) => {
const ch = document.getElementById("country").value;
console.log(ch);
if(ch=="None") {document.getElementById("bgi").style.background="black";}
else if(ch=="India") {document.getElementById("bgi").style.backgroundImage="url('https://wallpaperaccess.com/full/5770.jpg')";}
else if(ch=="USA") {document.getElementById("bgi").style.backgroundImage="url('Usa.jpghttps://wallpaperaccess.com/full/52904.jpg')";}
else if(ch=="Japan") {document.getElementById("bgi").style.backgroundImage="url('https://wallpaperaccess.com/full/6512.jpg')";}
else {document.getElementById("bgi").style.backgroundImage="url('https://wallpapercave.com/wp/wp1833702.jpg')";}
});

Output text changes based on two drop down menus

So basically I am trying to make a page where the user can select options from two drop down menus, when the second drop down menu has been completed and both have options in them I want it to trigger some javascript that takes those values and then returns text depending on the output.
E.g. a user selects xbox and comfort trade, the price is returned as £5, or maybe they select playstation and comfort trade, the price is returned as £2.50, or maybe they want pc and player auction the price is only £0.99.
HTML
<select id="platform" name="platform">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onChange="price()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
Javascript
function price() {
if ($(document.getElementById("platform")) === "xbox" && $(document.getElementById("method")) === "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
} else if ($(document.getElementById("platform")) === "playstation" && $(document.getElementById("method")) === "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}
I'm quite new to Javascript but I had a go at doing this, I also have spent the past hour or so trying to search for tutorials on this but nothing got it to work.

Try with this javascript function:
function price() {
if (document.getElementById("platform").value == "xbox" && document.getElementById("method").value == "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
} else if (document.getElementById("platform").value == "playstation" && document.getElementById("method").value == "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}

A couple things need to be updated in the existing code to get this to work:
1) onchange has no capital letters, and needs to be added to "platform" <select> as well
2) no need for $ here, can simply use document.getElementById
3) after selecting the element in step 2, will need to get the value of the select by accessing the property .value on the element.
Fixed code:
<div id="app">
<select id="platform" name="platform" onchange="price()">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onchange="price()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
</div>
<script>
function price() {
if(document.getElementById("platform").value === "xbox" && document.getElementById("method").value === "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
} else if(document.getElementById("platform").value === "playstation" && document.getElementById("method").value === "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}
</script>

Presuming you have jQuery installed because you are using $(...) in your code, you can solve your issue like this:
<select id="platform" name="platform" onchange="findPrice()">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onchange="findPrice()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
<script type="application/javascript">
window.findPrice = function() {
if($("#platform").val() === "xbox" && $("#method").val() === "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
}else if($("#platform").val() === "playstation" && $("#method").val() === "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}
</script>
You can see a working example of this at: https://jsfiddle.net/L2vgqmtL/
However, I would actually propose a slightly different solution that I find more elegant:
<script type="application/javascript">
window.findPrice = function() {
var platform = $("#platform").val();
var method = $("#method").val();
var priceUpdateText = "";
if(method == 'comfortTrade'){
switch(platform){
case "xbox":
priceUpdateText = "£5";
break;
case "playstation":
priceUpdateText = "£2.50";
break;
default:
priceUpdateText = "";
}
}
$("#price").text(priceUpdateText);
}
</script>
<select id="platform" name="platform" onchange="findPrice()">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onchange="findPrice()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
A working example of this solution is available here: https://jsfiddle.net/8wafskbw/2/
Important Note: Both of these solutions operate under the presumption that have jQuery included in your page.

jQuery bind three select menus hide/show

I have three select menus.
<form>
<select id="mass" name="mass">
<option value="Blank" selected>--</option>
<option value="Light">Light</option>
<option value="Medium">Medium</option>
<option value="Heavy">Heavy</option>
</select>
<select id="colour" name="colour">
<option value="Blank" selected>--</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<select id="textureColour" name="textureColour">
<option value="Blank" selected>--</option>
<option value="Orange">Orange</option>
<option value="Purple">Purple</option>
<option value="Black">Black</option>
</select>
</form>
I want the first menu to display, and the second and third menus to be hidden, until called upon.
If the first menu changes from the default option, I want the second menu to display.
Once a selection has been made within the second menu, I want the third menu to display.
However, I only want the third menu to display, if the selected value in the first menu is either 'Medium' or 'Heavy'. Selecting the default 'Blank' or 'Light' should hide the third menu.
Currently it isn't functioning as I would I like.
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if (mass.val() != 'Blank') {
$(colour).show();
} else {
$(colour).hide();
}
if (mass.val() === 'Light') {
$(textureColour).show();
} else {
$(textureColour).hide();
}
}).trigger('change');
colour.change(function() {
if ((mass.val() === 'Medium') || (mass.val() === 'Heavy')) {
$(textureColour).show();
} else {
$(textureColour).hide();
}
}).trigger('change');
});
JSFiddle

So, I guess that you want something like this
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if (mass.val() != 'Blank') {
$(colour).show();
$(colour).change();
} else {
$(colour).val('Blank');
$(textureColour).val('Blank');
$(colour).hide();
$(textureColour).hide();
}
});
colour.change(function() {
if ((mass.val() === 'Medium') || (mass.val() === 'Heavy') && colour.val() !== 'Blank') {
$(textureColour).show();
} else {
$(textureColour).hide();
}
});
});
#colour {
display: none;
}
#textureColour {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="mass" name="mass">
<option value="Blank" selected>--</option>
<option value="Light">Light</option>
<option value="Medium">Medium</option>
<option value="Heavy">Heavy</option>
</select>
<select id="colour" name="colour">
<option value="Blank" selected>--</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<select id="textureColour" name="textureColour">
<option value="Blank" selected>--</option>
<option value="Orange">Orange</option>
<option value="Purple">Purple</option>
<option value="Black">Black</option>
</select>
</form>
Hope it helps :)

Maybe you just forget to write $(colour).hide(); and $(textureColour).hide(); instead of $(colour).hide; and $(textureColour).hide;.
EDIT
I had to change complete your code. I think this is what you are looking for.
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if(mass.val() == 'Blank'){
colour.hide();
textureColour.hide();
}else{
colour.show();
if(colour.val() != 'Blank') textureColour.show();
}
if(mass.val() == 'Light') textureColour.hide();
}).trigger('change');
colour.change(function() {
if(colour.val() == 'Blank') return textureColour.hide();
if('Medium,Heavy'.split(',').indexOf(mass.val()) != -1){
textureColour.show();
}
}).trigger('change');
});

I updated the javascript and now it is functioning how I wanted it too:
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if (mass.val() != 'Blank') {
$(colour).show();
$(colour).change();
} else {
$(colour).val('Blank');
$(textureColour).val('Blank');
$(colour).hide();
$(textureColour).hide();
}
});
colour.change(function() {
if (((mass.val() === 'Medium') && colour.val() !== 'Blank') || ((mass.val() === 'Heavy') && colour.val() !== 'Blank')) {
$(textureColour).show();
} else {
$(textureColour).hide();
}
});
});
JSFiddle

Verify values of selctbox using jquery

i'm new to this. I'm using in a html page with 2 selctboxs, one for min price and the other for max price and a hidden input to put on it the combination of the two values of the selectboxs.
<div class="option-bar mini first">
<label><?=__("Min Price")?></label>
<span class="selectwrap">
<select name="min-price" id="pmin" class="search-select">
<option value=""></option>
<option value="1000">$1000</option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>
</select>
</span>
</div>
<div class="option-bar mini">
<label><?=__("Max Price")?></label>
<span class="selectwrap">
<select name="max-price" id="pmax" class="search-select">
<option></option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>
<option value="10000">$10,000</option>
</select>
</span>
</div>
<input type="hidden" id="prix" name="prix" class="sel2" value="" />
and i got this jquery code :
$("#pmin, #pmax").change(function(){
update();
});
function update() {
$("#prix").val($('#pmin').val() + "-" + $('#pmax').val());
}
So what i want to do is when the user select options in the two selectbox, verify if the min price value is lower than the max price value and if not show a message.
Thnx a lot guys.

$("#pmin, #pmax").change(function() {
if ($("#pmin").val() && $("#pmax").val()) { //check if both have values
if (parseFloat($("#pmin").val()) > parseFloat($("#pmax").val())) { //check if valid range
alert('invalid range')
return;
}
}
update();
});

$(".search-select").change(fucntion(){
var max_val = $("#pmax").val();
var min_val = $("#pmin").val();
if(max_val != '' && min_val != '' && max_val < min_val){
alert("Max value is less than Min value.");
}
});
Try this..!!

You should modify the change and update method as shown below:
$("#pmin, #pmax").change(function() {
if ($('#pmin').val() != "" && $('#pmax').val() != "") {
update();
}
});
function update() {
var computedValue = parseInt($('#pmin').val()) - parseInt($('#pmax').val());
if (computedValue < 0) {
alert('Invalid selection.');
}
$("#prix").val(computedValue);
}
Refer the demo.

Check if all dropdowns are empty or not jQuery

I have three select elements:
<select id="first">
<option></option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select id="second">
<option></option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
<select id="three">
<option></option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i"></option>
</select>
All three of them must either be empty (first option), or have a value.
So <option></option> <option></option> <option></option> is ok
but not <option value="a">a</option> <option></option> <option></option> kinda thing.
I've tried this, but it isn't working as it doesn't allow all three to be empty and quits on the first case
if($("#first").val() === "" || $("#second").val() === "" || $("#third").val() === ""){
return false;
}
Any help? I would like to do this as short/nice looking as possible

You could
var $selects = $('#first, #second, #three'),
$selected = $selects.filter(function () {
return this.value != ''
});
if ($selected.length != 0 && $selected.length != $selects.length) {
return false;
}
Demo: Fiddle

var first = $("#first").val();
var second = $("#first").val();
var three = $("#first").val();
var isValid = false;
if((first.length>0 && second.length>0 && three.length>0) || (first.length==0 && second.length>== && three.length==0)){
isValid = true;
}

Try this:
if($("#first").find('option').length <=1 || $("#second").find('option').length <=1 || $("#third").find('option').length <=1){
return false;
}

We Keep Coding

JavaScript is the programming language of the Web.

Pass multiple select values to a function to update an image - javascript

Related

I am trying to change the background image as soon as the respective option is selected from the select drop down list. but this is not happening

Output text changes based on two drop down menus

jQuery bind three select menus hide/show

Verify values of selctbox using jquery

Check if all dropdowns are empty or not jQuery

Categories

Resources