jquery - Javascript not populating input value correctly -


i'm building store website, , on item page there color options. click on color option , changes photo show user, , there's hidden input who's value supposed update chosen color, can't work right.

in $(document).ready(function() have javascript populating input's value, works occasionally, less not. code have seems me should work. i'm not sure i'm missing or doing wrong @ point.

here's code

in 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 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>

i'm going save lot of time, don't set option via javascript, set default option via putting value in hidden input element.

you can change later js.


Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more