I have two dropdown menus. The picture that's displayed changes based on the dropdown selection.
I want to make it so that when a User chooses a color and then an overlay, the overlay image displays on top of the color image rather than replacing it.
I'm new to javascript and not sure where to begin to solve this, so any insight at all really helps.
var changeColorImage = function() {
document.getElementById('image').src = this.options[this.selectedIndex].value + "_Image.png"
}
var colorList = document.getElementById('ColorList');
colorList.addEventListener('change', changeColorImage, false);
var changeOverlayImage = function() {
document.getElementById('image').src = this.options[this.selectedIndex].value + "_Image.png"
}
var overlayList = document.getElementById('OverlayList');
overlayList.addEventListener('change', changeOverlayImage, false);
img {
margin: 50px;
width: 100px;
}
<select id="ColorList">
<option value="none">None</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<select id="OverlayList">
<option value="overlay_1">Overlay 1</option>
<option value="overlay_2">Overlay 2</option>
<option value="overlay_3">Overlay 3</option>
</select>
<img id="image" src="none_Image.png" />
Related
I am a little stuck on how I can display images from my image folder based on different values from my options. I want to display images of different drinks based on the users selected options. So if I select Vodka, Sweet, Blended it would display an image of a drink that fits that parameter. I have images saved as the names of the combined values of each group.
ex: "B1X.jpg" would display an image of a boozy frappe.
JS
function displayDrink(src) {
var mixedDrink = $("alcohol").val() + $("flavor").val() + $("type").val() + ".jpg";
}
HTML
<body>
<form>
<select id="alcohol">
<option value="A">Select Alcohol</option>
<option value="B">Vodka</option>
<option value="C">Whiskey</option>
<option value="D">Rum</option>
<option value="E">Tequila</option>
<option value="F">Gin</option>
<option value="G">Bourbon</option>
<option value="H">Scotch</option>
<option value="I">Vermouth</option>
<option value="J">Spirits</option>
<option value="K">Cognac</option>
</select>
<select id="flavor">
<option value="0">Select Flavor</option>
<option value="1">Sweet</option>
<option value="2">Sour</option>
<option value="3">Savory</option>
<option value="4">Spicy</option>
<option value="5">Smoky</option>
<option value="6">Bitter</option>
<option value="7">Fruity</option>
<option value="8">Herbaceous</option>
</select>
<select id="type">
<option value="W">Select Type</option>
<option value="X">Blended</option>
<option value="Y">Iced</option>
<option value="Z">Chilled</option>
</select><br /><br />
</form>
</body>
Have an image tag such as:
<img class="image-container"></img>
select the container:
const container = document.querySelector('.image-container');
subscribe to changes of each of your select elements:
const alcoholSelect = document.querySelector('#alchohol');
const flavorSelect = document.querySelector('#flavor');
const typeSelect = document.querySelector('#type');
alcoholSelect.addEventListener('change', () => handleDrinkSelect());
flavorSelect.addEventListener('change', () => handleDrinkSelect());
typeSelect.addEventListener('change', () => handleDrinkSelect());
add the handler: (make sure to adjust the output string to match the relative location of your images folder)
function handleDrinkSelect () {
container.src = `${alcoholSelect.value}${flavorSelect.value}${typeSelect.value}.jpg`;
}
You could also do it more cleanly with event delegation
I have a system where you are able to choose a car. You can then choose the transmission and color. Different cars and transmissions bring up different colors. Not sure how to make an image appear of a car when a color is chosen. So for example I choose the rs6 and automatic and then the black color. I would then want an image to appear depending on the color chosen. How would I program it so different cars and colors bring up different images. Im relatively new to coding. Any help would be aprreciated.
HTML
<!DOCTYPE html>
<html><head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1 /jquery.min.js"/
</script>
<script src="configurator.js"></script>
</body>
</html>
Javascript
$("#car").change(function () {
transmission();
});
$("#trans").change(function () {
transmission();
});
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
For now it is only working for Audi - Automatic - black and blue to show you the basic idea but it is repeating code and you can do the same for the rest of the cars too.
In this example I am setting the src of the image as the car selected. For example if you select car1 and man and red then src of the image as car1manred.jpg, also I'm changing the alt attribute as well so that you can see the change.
you have to do a lot of manual work. I have created an object for the data that will determine how many cars you have in each category. It would be better if you use JSON for that.
Also I have made car1autoblack (which gets the src of the images) as an array but you can make it as an object and include other things about the cars in this category. for example name, price, availability and much more
$("#car").change(function () {
transmission();
selection();
});
$("#trans").change(function () {
transmission();
selection();
});
$("#color").change(function () {
selection();
});
var cars = {
car1autoblack:["car1auto1black1.png","car1auto1black2.jpg"],
car1autoblue:["car1auto1blue1.png","car1auto1blue2.jpg","car1auto1blue3.jpeg"]
}
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
function selection(){
if ($("#car").val() && $("#trans").val() && $("#color").val()) {
var carVal = $("#car").val();
var transVal = $("#trans").val();
var colorVal = $("#color").val();
var combineVal = carVal+transVal+colorVal;
//var imageLink = combineVal+".jpg";
//$("#showImg").attr("src", imageLink);
//$("#showImg").attr("alt", imageLink);
//console.log(cars[combineVal]);
var inputDivHTML = "";
var car = cars[combineVal];
for(i in car){
inputDivHTML += "<img class='showImg' src='"+car[i]+"' alt='"+car[i]+"'/>";
}
$(".imageHere").html(inputDivHTML);
}
}
img.showImg{
width:150px;
height:70px;
margin:10px 3px;
border:1px solid red;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<div class="imageHere">
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
</div>
I'm building a web store on shopify. I want to add a validation to dropdown that if no size/value is selected from drop down, it automatically select 1st size/value. when we click on add to cart button.
Thanks for the help.
Given this HTML:
<select id="drop">
<option value="0">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button id="add">Add to cart</button>
Use this javascript/jQuery:
$(document).ready(function() {
var $drop = $("#drop");
$("#add").on("click", function() {
if($drop.val() == 0) {
$drop.val(1);
}
});
});
http://jsfiddle.net/82vrccem/1/
Here I have mention a drop-down list and after that the JavaScript validation also given.
<select id="dropdown">
<option value="0">Select</option>
<option value="1">Option One</option>
<option value="2">Option Two</option>
<option value="3">Option Three</option>
</select>
Use the flowing JavaScript validation for upper drop-down list.
function Validate()
{
var e = document.getElementById("dropdown");
var strUser = e.options[e.selectedIndex].value;
//if you need text to be compared then use
var strUser1 = e.options[e.selectedIndex].text;
if(strUser==0) //for text use if(strUser1=="Select")
{
alert("Please select a user");
}
}
I am designing affiliate program, in which each user has his own link-code aka tracking URL.
I am willing to add extra parameters to it depending on the drop down selection which will be different landing pages.
e.g.
original URL:
http://www.google.com/tracker/blah1
and if user selects value from down the URL should be like:
http://www.google.com/tracker/blah1/queryid/1
I am using this code for displaying the URL to the end user in the input box set as readonly.
<input size="100" type="text" value="<?=$url;?>" readonly> - <a target="_blank" href="<?=$url;?>">Link</a></b>
There's gonna be two drop down like these.
<select name="niche">
<option value="0" label="choose one">choose one</option>
<option value="/queryid/1" label="option 1">option 1</option>
<option value="/queryid/2" label="option 2">option 2</option>
<option value="/queryid/3" label="option 3">option 3</option>
<option value="/queryid/4" label="option 4">option 4</option>
<option value="/queryid/5" label="option 5">option 5</option>
<option value="/queryid/6" label="option 6">option 6</option>
</select>
By selecting option 1 it should add /queryid/1 to the end of the url.
if none is selected then no change will be there.
<select name="landingpage">
<option value="0" label="choose one">choose one</option>
<option value="/cid/1" label="landing 1">landing 1</option>
<option value="/cid/2" label="landing 2">landing 2</option>
</select>
By selecting landing 1 will add /cid/1 to the end of the URL.
if none is selected then no change will be there.
So how do I do this?
Update: updated the values of dropdown as currently using htaccess rewrite rules.
update:
I am using as specified by "Rishi Php" demo is here http://jsfiddle.net/g6U4a/2/
but by default its not showing SourceUrl
it should show the source URL by default, in the box but it shows it when user changes drop down values.
How can I achieve this?
update:
"Rishi Php" fixed the issue of on load default url.
here is the code. http://jsfiddle.net/g6U4a/3/
Thanks to all of you guys.
Don't forget to add this in header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
replaced
var SourceUrl = "http://www.google.com/?tracker=blah1";
with
var SourceUrl = "<?=$url;?>";
so each affiliate will have unique link
Try this... It 'll help. *UPDATED WORKING DEMO*
var SourceUrl = "http://www.google.com/?tracker=blah1";
var queryUrl = "";
var landingUrl = "";
$(function() {
$('#querySelct').on('change', function () {
if($(this).val() == 0) {
queryUrl = "";
} else {
queryUrl = $(this).val();
}
MakeUrl();
return false;
});
$('#landingSelect').on('change', function () {
if($(this).val() == 0) {
landingUrl = "";
} else {
landingUrl = $(this).val();
}
MakeUrl();
return false;
});
});
function MakeUrl() {
var finalUrl = SourceUrl + queryUrl + landingUrl;
$('#urlBox').val(finalUrl);
$('#MyLink').attr('href', finalUrl);
}
You can use getElementById to get the values from the <select> fields and set them into your textfield.
DEMO: http://jsfiddle.net/g6U4a/1/
HTML
<select id="queryid">
<option value="0" label="choose one">choose one</option>
<option value="&queryid=1" label="option 1">option 1</option>
<option value="&queryid=2" label="option 2">option 2</option>
<option value="&queryid=3" label="option 3">option 3</option>
<option value="&queryid=4" label="option 4">option 4</option>
<option value="&queryid=5" label="option 5">option 5</option>
<option value="&queryid=6" label="option 6">option 6</option>
</select>
<br>
<select id="cid" name="landingpage">
<option value="0" label="choose one">choose one</option>
<option value="&cid=1" label="landing 1">landing 1</option>
<option value="&cid=2" label="landing 2">landing 2</option>
</select>
<input type="button" id="change" value="Create URL" onclick="createUrl()" /><br>
<input type="text" id="result" placeholder="placeholder" readonly><br>
JAVASCRIPT
function createUrl() {
var google = "http://www.google.com/";
document.getElementById("result").value = google + document.getElementById("queryid").value + document.getElementById("cid").value;
}
You could do something like this:
<select id="yourSelect" name="landingpage">
<option value="" label="choose one">choose one</option>
<option value="www.yourdomain.com&cid=1" label="landing 1">landing 1</option>
<option value="www.yourdomain.com&cid=2" label="landing 2">landing 2</option>
</select>
$(function(){
$('#yourSelect').on('change', function () {
var url = $(this).val();
if (url) {
window.location = url;
}
return false;
});
});
Give selector for selectbox like
var urlToAppend1=$('#nicheId :selected').val();
originalurl='http://www.google.com/?tracker=blah1';
var url='';
url+=originalurl;
url+=urlToAppend;
Try it.
$(function(){
$('select').change(function() {
var arr = new Array();
$('select option:selected').each(function(){
var value = $(this).val();
if(value != "0"){
arr.push($(this).val());
}
});
// selected value are now concatenating here.
var str = arr.join('');
alert(str);
});
});
I need to change the image on my website using 2 select for colour and size.
e.g. If I choose the option "Red" under the colour select, and then I choose the option "Small" under the size select, the image should be "small_red.png".
Similarly, if I choose red and large, then the image should be "red_large.png"
Thus far, I only know how to do it for 1 select, but not multiple select.
Here's my html:
<img id="imageToSwap" src="img/red.png">
<select id="colour" onChange="swapImage()">
<option value="img/red.png">Red</option>
<option value="img/green.png">Green</option>
</select>
Here's my javascript:
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var change = document.getElementById("colour");
image.src = change.value;
};
</script>
var
img = document.getElementById('imageToSwap'),
colour = document.getElementById('colour'),
size = document.getElementById('size'),
change;
change = function (evt) {
img.src = ['img/', size.value, '_', colour.value, '.png'].join('');
};
colour.addEventListener('change', change, false);
size.addEventListener('change', change, false);
with:
<img id="imageToSwap">
<select id="colour">
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<select id="size">
<option value="small">Small</option>
<option value="big">Big</option>
</select>
demo: http://jsbin.com/iwezad/2/
though, using jQuery this could be shortend a lot, and you'd get rid of some browser quirks regarding addEventListener.
jQuery version:
$('#colour, #size').on('change', function() {
$('#imageToSwap').prop('src',
['img/', $('#size').val(), '_', $('#colour').val(), '.jpg'].join('')
);
});
You can always concatenate values from selects.
<img id="imageToSwap" src="img/red.png">
<select id="colour" onChange="swapImage()">
<option value="red.png">Red</option>
<option value="green.png">Green</option>
</select>
<select id="size" onChange="swapImage()">
<option value="small">Small</option>
<option value="large">Large</option>
</select>
And in script:
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var color = document.getElementById("colour").value;
var size = document.getElementById("size").value;
image.src = "img/" + size + "_" + color;
};
</script>
<img id="imageToSwap" >
<select id="colour" onchange="swapImage()">
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<select id="size" onchange="swapImage()">
<option value="small">Small</option>`
<option value="large">Large</option>
</select>
Javascript code:
<script type="text/javascript" language="javascript">
function swapImage() {
var image = document.getElementById("imageToSwap");
var color = document.getElementById("colour").value;
var size = document.getElementById("size").value;
var imagename = size + '_' + color + '.png';
image.src = "img/" + imagename;
}
</script>