Dynamically changing photo with dropdown

Question

I am new to PHP and am trying to figure out how to code some specific functionality. I have a product page that shows a photo and has two dropdown menus, one for size and one for color. What I would like to do is when the page first loads I set a variable that has the default product SKU. When the menus change I want to change the variable to the combined values of the two menu items selected. As the variable changes I want to reflect this in the photo and in a hidden form value (for eventual submission to a cart).

So when the page loads it shows picture A with the associated values in the size and color dropdowns. Then when either of the dropdowns change the photo dynamically changes to reflect it (while also updating the hidden form value).

Any suggestions would be much appreciated.

You want to use JavaScript for that. – Bart Friederichs Jan 28 '13 at 19:25 — Bart Friederichs, Jan 28 '13 at 19:25

PlantTheIdea · Accepted Answer · 2013-01-29T19:14:51.643

3

JavaScript, or a JS library like jQuery, is what you need here.

For jQuery (preferred, way easier):

var $select = $('#Dropdown'),
    $img = $('#Picture');

$select.on('change',function(){
    $img.attr('src',$(this).val());
});

For JavaScript:

var dropdown = document.getElementById('Dropdown'),
    img = document.getElementById('Picture');

dropdown.addEventListenter('change',function(){
    img.src = this.value;
});

Not tested, but should work.

Edit: when using the JavaScript solution, make sure the window is loaded first (it won't work if the elements dont exist yet).

window.onload = function(){
    // do your magic here
}

edited Jan 29 '13 at 19:14

answered Jan 28 '13 at 19:31

PlantTheIdea

15,347
4
31
40

Thanks LifeInTheGrey. I'll let you know how it works out for me. – user2019346 Jan 28 '13 at 20:57
I thought I had this figured out but... nope. I tried the following script: and get an error that Chrome V8 console says is an error cannot call method addEventListener of null. – user2019346 Jan 29 '13 at 17:13
is your javascript in the head of the document? if so thats your problem: http://stackoverflow.com/questions/9856140/javascript-uncaught-typeerror-cannot-call-method-addeventlistener-of-null – PlantTheIdea Jan 29 '13 at 17:22
I was wondering about the function() -- does this need to call a particular function that was already written? – user2019346 Jan 29 '13 at 17:39
it can do both. honestly, there is a reasaon I recommended using jQuery ... it really is way easier to implement it. – PlantTheIdea Jan 29 '13 at 17:45
I'll try to get this into jquery. Thanks. – user2019346 Jan 29 '13 at 17:51
So this is what I ended up with, but it's still no working. Here is the code for the entire body portion of the page: – user2019346 Jan 29 '13 at 18:13
Geez. Sorry about that. Can't figure out how to get the entire code block into here. Says it's too long. – user2019346 Jan 29 '13 at 18:15
– user2019346 Jan 29 '13 at 18:23
when you say 'not working' ... what is happening, give me a bit more to work with – PlantTheIdea Jan 29 '13 at 18:30
Well, on the page the image doesn't change when the dropdowns do. Chrome console doesn't indicate any problems though. – user2019346 Jan 29 '13 at 18:32
have you tried doing console.log(value of dropdown) to confirm the values are changing correctly? – PlantTheIdea Jan 29 '13 at 18:46
So poking around the Chrome console I was able to determine that the values of all the the variables end up as undefined. – user2019346 Jan 29 '13 at 18:49
can you edit your question to include both HTML and jQuery? or even better, set up a jsFiddle? – PlantTheIdea Jan 29 '13 at 18:51
Sorry but I tried console.log(valueof.boardselect) and got undefined. I kind of new at this so tell me if that is not the correct way to do it. One dropdown's id is boardsize, the other is sizeselect. – user2019346 Jan 29 '13 at 20:03
jsFiddle updated. obviously the structure of the img source needs to change to fit whatever the actual name convention u have is, but there u go. also, you might consider ditching tables for css. http://webdesign.about.com/od/layout/a/aa111102a.htm – PlantTheIdea Jan 29 '13 at 21:20

score 2 · Answer 2 · answered Jan 28 '13 at 19:40

Firstly, PHP is a server side language which effectively means, anything that it generates must be processed by the server and then sent back to the browser. Therefore in this particular case, you need to use a client side language such as Javascript, or to make the code easier, a library such as jQuery.

To learn more about jQuery, see here:

http://jquery.com/

In very generalised terms (as you have not posted any code), here is an example of changing an image using jQuery:

// Select the dropdown from the DOM
var dropdown = $('#dropdown_id');

// Select the image from the DOM
var image = $('#image');

// Set the onchange event
// This will be fired when the select value is changed
dropdown.on('change',function(){
    // Get the value of the selected option
    var value = $(this).val();

    // Change the source of the image
    image.attr('src',value);
});

@user2019346 Your welcome. Don't forget to accept the correct answer :-) — Ben Carey, Jan 28 '13 at 21:06

Dynamically changing photo with dropdown

2 Answers2