CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Justin White
Justin White

Reputation: 714

Javascript not populating input value correctly

I'm building a store for my website, and on the item page there are color options. Click on the color option and it changes the photo so show the user, and there's a hidden input who's value is supposed to update with the chosen color, but I can't get it to work right.

In the $(document).ready(function() I have Javascript populating that input's value, but it only works occasionally, less often than not. The code I have seems to me like it should work. I'm not sure what I'm missing or doing wrong at this point.

Here's the code

In the head:

<script type="text/javascript">

    function color(option) {
        document.getElementById('photo').src = '../img/tshirts/shirts/' + option + '.jpg';
        document.getElementById('item-color').value = option;
    }

</script>

In the body:

<div id="photo-wrapper">
    <img id="photo" src="../img/tshirts/shirts/charcoal-black.jpg" />
    <input type="hidden" id="item-color" name="item-color" value="charcoal-black" />
    <div id="colors">
        <a href="javascript:color('aqua');"><img class="swatch" src="../img/tshirts/swatches/aqua.png" title="Aqua"/></a>
        <a href="javascript:color('athletic-grey');"><img class="swatch" src="../img/tshirts/swatches/athletic-grey.png" title="Athletic Grey"/></a>
        <a href="javascript:color('berry');"><img class="swatch" src="../img/tshirts/swatches/berry.png" title="Berry"/></a>
        <a href="javascript:color('blue');"><img class="swatch" src="../img/tshirts/swatches/blue.png" title="Blue"/></a>
        <a href="javascript:color('brown');"><img class="swatch" src="../img/tshirts/swatches/brown.png" title="Brown"/></a>
        <a href="javascript:color('charcoal-black');"><img class="swatch" src="../img/tshirts/swatches/charcoal-black.png" title="Charcoal Black"/></a>
        <a href="javascript:color('clay');"><img class="swatch" src="../img/tshirts/swatches/clay.png" title="Clay"/></a>
        <a href="javascript:color('emerald');"><img class="swatch" src="../img/tshirts/swatches/emerald.png" title="Emerald"/></a>
        <a href="javascript:color('green');"><img class="swatch" src="../img/tshirts/swatches/green.png" title="Green"/></a>
        <a href="javascript:color('grey');"><img class="swatch" src="../img/tshirts/swatches/grey.png" title="Grey"/></a>
        <a href="javascript:color('maroon');"><img class="swatch" src="../img/tshirts/swatches/maroon.png" title="Maroon"/></a>
        <a href="javascript:color('navy');"><img class="swatch" src="../img/tshirts/swatches/navy.png" title="Navy"/></a>
        <a href="javascript:color('orange');"><img class="swatch" src="../img/tshirts/swatches/orange.png" title="Orange"/></a>
        <a href="javascript:color('purple');"><img class="swatch" src="../img/tshirts/swatches/purple.png" title="Purple"/></a>
        <a href="javascript:color('red');"><img class="swatch" src="../img/tshirts/swatches/red.png" title="Red"/></a>
        <a href="javascript:color('solid-black');"><img class="swatch" src="../img/tshirts/swatches/solid-black.png" title="Solid Black"/></a>
        <a href="javascript:color('teal');"><img class="swatch" src="../img/tshirts/swatches/teal.png" title="Teal"/></a>
        <a href="javascript:color('true-royal');"><img class="swatch" src="../img/tshirts/swatches/true-royal.png" title="True Royal"/></a>
    </div>
</div>

Upvotes: 1

Views: 78

Answers (1)

Organiccat
Organiccat

Reputation: 5651

I'm hopefully going to save you a lot of time, don't set the option via JavaScript, set the DEFAULT option via actually putting the value in the hidden input element.

You can change it later with JS.

Upvotes: 4

Related Questions