jeudi 13 août 2015

How to set an image to change source based off of two different radio buttons?

I'm starting to understand PHP pretty well, however, Javascript is still pretty new to me. I'm trying to change an image with Javascript, based on the selection of two radio buttons.

My radio buttons are as follows (one from the color set of radio buttons and one from the trim level set of radio buttons):

<input name="extcolor" type="radio" id="extcolor2'" value="Obsidian Blue Pearl" />
<input name="trimlevel" data-trim="exl" type="radio" value="2016 Honda Odyssey EX-L" />

I was able to get it to work with only one variable with this code:

<script type='text/javascript'>
$(document).ready(function(){
    $("input:radio[name=extcolor]").click(function() {
        var color = $(this).val();
        var image_name;
            image_name = ("/new-inventory-stock-images/<?=$VehicleYear?>/<?=$VehicleModel?>/configurations/base-cars/"+color+"_exl_34FRONT.png");
         $('#buildyourown').attr('src', image_name);
    });
});

<img src="default-image.png" name="buildyourown" id="buildyourown"> 

However, when I try to add a second variable, as is shown below, this is where the problem occurs. I can't seem to get javascript to read the data-trim data attribute in the trimlevel radio buttons and I don't think my functions are set up properly to work at the same time, but I can't for the life of me figure out how to set it up so both work. Can someone point me in the right direction?

<script type='text/javascript'>
$(document).ready(function(){
    $("input:radio[name=trimlevel]").click(function() {
        var trimlevel =$(this).attr(dataset.trim); 
        }

    $("input:radio[name=extcolor]").click(function() {
        var color = $(this).val();

        var image_name;
            image_name = ("/new-inventory-stock-images/<?=$VehicleYear?>/<?=$VehicleModel?>/configurations/base-cars/"+color+"_"+trimlevel+"_34FRONT.png");
         $('#buildyourown').attr('src', image_name);
    });
});

<img src="default-image.png" name="buildyourown" id="buildyourown"> 



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire