Change an image based off two select values

[GOMLP]

Awhile ago you helped me with changing an image dynamically based on three select fields, however I have been trying to adjust the code to base it off of two select fields and I so must be missing something as I have spent numerous hours trying to adjust the code and had no luck.

I have included some images to assist you.

On Page3 of my form the client can choose their substrate to have their label printed on, the value of this select menu (14_217) is set dynamically based on the other two select menus above. The value is a simple value like “16256”, “17842”…etc.

On Page4 I will be containing several options for label finishing that the customer can select.

On the right side you will see a bottle, I have layered images on top of each other to visually show the effect of their selection.

What I need to do is modify the code you helped me out with before to only be based on the two menu selects, 14_217 and 14_706 to change the image overlay.

Below is the code you helped me out with before, I just need to do it based on two select fields.

jQuery(function ($) {
function setImageUrl() {
var category = $(‘.quform-field-12_18’).val(),
type = $(‘.quform-field-12_20’).val(),
substrate = $(‘.quform-field-12_34’).val(),
image = ”;

if (category !== ” && type !== ”) {
if (category === ‘Wine & Spirits’) {
if (type === ‘WhiteWine’) {
if (substrate === ”) {
image = ‘substrates/whitewine/WhiteWineBottle.jpg’;
} else {
image = ‘substrates/whitewine/WW’ + substrate + ‘.jpg’;
}
} else if (type === ‘BlushWine’) {
if (substrate === ”) {
image = ‘substrates/blushwine/BlushWineBottle.jpg’;
} else {
image = ‘substrates/blushwine/BW’ + substrate + ‘.jpg’;
}
} else if (type === ‘RedWine’) {
if (substrate === ”) {
image = ‘substrates/redwine/RedWineBottle.jpg’;
} else {
image = ‘substrates/redwine/RW’ + substrate + ‘.jpg’;
}
} else if (type === ‘Spirits’) {
if (substrate === ”) {
image = ‘substrates/Spirits/VodkaBottle.jpg’;
} else {
image = ‘substrates/Spirits/Vodka’ + substrate + ‘.jpg’;
}
}
} else if (category === ‘Craft Beer & Cider’) {
} if (type === ‘Cans’) {
if (substrate === ”) {
image = ‘substrates/BeerCans/BeerCan.jpg’;
} else {
image = ‘substrates/BeerCans/BC’ + substrate + ‘.jpg’;
}
} else if (type === ‘Bottles’) {
if (substrate === ”) {
image = ‘substrates/BeerBottles/BeerBottle.jpg’;
} else {
image = ‘substrates/BeerBottles/BB’ + substrate + ‘.jpg’;
}
} else if (type === ‘Growlers’) {
if (substrate === ”) {
image = ‘substrates/Growlers/Growler.jpg’;
} else {
image = ‘substrates/Growlers/GB’ + substrate + ‘.jpg’;
}
} else if (category === ‘General Food Products’) {
} if (type === ‘Jam Jar’) {
if (substrate === ”) {
image = ‘substrates/Jam/JamJar.jpg’;
} else {
image = ‘substrates/Jam/Jam’ + substrate + ‘.jpg’;
}
} else if (type === ‘OliveOil’) {
if (substrate === ”) {
image = ‘substrates/OliveOil/OOBottle.jpg’;
} else {
image = ‘substrates/OliveOil/OO’ + substrate + ‘.jpg’;
}
} else if (type === ‘Growlers’) {
if (substrate === ”) {
image = ‘substrates/Growlers/Growler.jpg’;
} else {
image = ‘substrates/Growlers/GB’ + substrate + ‘.jpg’;
}
}
} else {
image = ‘uploads/MixedBottles.jpg’;
}

$(‘#product-image’).attr(‘src’, ‘http://gomlp.biz/wp-content/’ + image);
}

$(‘.quform-field-12_18, .quform-field-12_20, .quform-field-12_34’).on(‘change’, setImageUrl);
});

Attachments:

You must be logged in to view attached files.

[GOMLP]

Also if you can help to modify it for an image change based on one select dynamically without using the “Logic” feature because I do know there is a limit on how many elements you can have on a form page that would be great.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[GOMLP]

I will work on setting up a user for you and send you the information, however if you know of a way to modify the code just based off of two select menus I can try to work on it over the weekend.

[GOMLP]

Just replying to this thread so I can activate the email notification.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts