Javascript not populating input value correctly

Question

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>

What is document.getElementById('color-title').html(option); supposed to do? There's no such of method (html()) in HTML elements. — Teemu
– Teemu, Commented Jul 13, 2015 at 17:00
jQuery has a .html. Do you mean $('#color-title').html(option); — mwilson
– mwilson, Commented Jul 13, 2015 at 17:07
There are no elements in the html that you provided that have ids color-choice or color-title. — coderfin
– coderfin, Commented Jul 13, 2015 at 17:15
it's not actually doing anything. That's just the remnants of something I started but decided not to do. I'll take it out so it isn't confusing — Justin White
– Justin White, Commented Jul 13, 2015 at 17:16

Organiccat · Accepted Answer · 2015-07-13 17:00:29Z

4

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.

answered Jul 13, 2015 at 17:00

Organiccat

5,65918 gold badges62 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Justin White Over a year ago

I set the value to the default color, but I'm still not able to change it when the user chooses a different color

Organiccat Over a year ago

Put a breakpoint in your color function. Make sure "option" is correctly set to the color you're passing through. Make sure there is actually an image with the path that is set up (perhaps you're missing some?).

Justin White Over a year ago

That's the thing - the image changes perfectly when the user chooses a color. The only thing not happening is populating the value of the hidden input with the correct color

Organiccat Over a year ago

Are there any console errors? Does "option" have the correct value?

Organiccat Over a year ago

Also, it's entirely possible your hidden input field is being updated and you just don't see the value updating depending on what tools you are using to watch it.

|

Collectives™ on Stack Overflow

Javascript not populating input value correctly

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related