Change an image based off two select values

Home Forums Quform WordPress Change an image based off two select values

This topic is: not resolved
  • This topic has 5 replies, 2 voices, and was last updated 4 weeks ago by Ally.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #33574
    GOMLP
    Participant

    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.
    #33577
    GOMLP
    Participant

    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.

    #33585
    Ally
    Support Staff

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

    #33587
    GOMLP
    Participant

    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.

    #33591
    GOMLP
    Participant

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

    #33597
    Ally
    Support Staff

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy