Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Need Help with javascript value and data attribute for form combo box.

    I have a drop down in a form with a select option that the user can choose a font color, then I have a working script that displays this font and their selected color in a separate textarea.

    My problem is that I need the value for my shopping cart, but I need the Hex color number to make the font color script to work properly. Here is a portion of this html and javascript that works:

    Code:
    				<!--  Script works, however Cart adds Hex Color name to Cart (cart needs value=" " )   -->	
    					
    				<select id="color_combo" name="product">	
        		    	             <option value="#8D0000" style= "color: #8D0000; background-color: #8D0000;">Red</option>
        		    	             <option value="#FEDC1A" style= "color: #FEDC1A; background-color: #FEDC1A;">Sunflower&nbsp;Yellow</option>
        		    	             <option value="#FE6A1A" style= "color: #FE6A1A; background-color: #FE6A1A;">Orange</option>
    				</select>
    				
    				
    				<script>
        				$("select").change(function () {
        					var color = $("#color_combo").val();;
        					$("#large-text-input").css("color",color);
        				});
        			</script>
    In order to modify this code, so that I could add a data attribute in hope that the font colors will update properly and the shopping cart will show a color name from the value below is how I made the changes, but this does not work.

    Code:
    <!--  Script does not work -- attempt to have Cart add value=" " Color name --  data- attribute 'textcolor' to show text color in lid="large_text_input" -->	
    				
    				<select id="color_combo" name="product">
    					<option value="Red" textcolor="#8D0000" style= "color: #8D0000; background-color: #8D0000;">Red</option>
        		    	                <option value="Sunflower Yellow" textcolor="#FEDC1A" style= "color: #FEDC1A; background-color: #FEDC1A;">Sunflower&nbsp;Yellow</option>
        		    	                <option value="Orange" textcolor="#FE6A1A" style= "color: #FE6A1A; background-color: #FE6A1A;">Orange</option>
    				</select>
    				
    				<script>
        				$("select").change(function () {
        					var color = $("#color_combo").attr('textcolor');;
        					$("#large-text-input").css("color",color);
        				});
        			</script>
    I am not sure where I am going wrong, and I have tried many combinations of the ).attr('textcolor');; But nothing works.

    Maybe this is a simple missing character or maybe there is a better method of making this happen? Any suggestions are greatly appreciated. Thanks.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Does it make any difference if you prefix your data attribute name references with data -

    <option value="Red" data-textcolor="#8D0000" style= "color: #8D0000; background-color: #8D0000;">Red</option>

    and

    var color = $("#color_combo").attr('tdata-extcolor');

    It may have something to do with the names you are referencing not being valid attribute names in which case converting them to valid attribute names like this might fix it.

    Alternatively you ought to be able to work using the style attribute since the colour you are after is in there - then you wouldn't need an extra attribute..
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the reply

    I have tried that, but it is not working, just uploaded it here: <option at line 507, script at line 808, if you want a look at the full code: Vinyl

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    the reason it's not working is because the extra attributes are on the options, not the selects. It's actually simpler to do this without jQuery - try this:

    Code:
    <body>
    <select id="color_combo" name="product">
    <option value="Red" textcolor="#8D0000" style= "color: #8D0000; background-color: #8D0000;">Red</option>
    <option value="Sunflower Yellow" textcolor="#FEDC1A" style= "color: #FEDC1A; background-color: #FEDC1A;">Sunflower&nbsp;Yellow</option>
    <option value="Orange" textcolor="#FE6A1A" style= "color: #FE6A1A; background-color: #FE6A1A;">Orange</option>
    </select>
    <input id="large-text-input"value="example"/>
    				
    				<script>
        				$("#color_combo").change(function () {
        					var sel= $(this)[0];
    						var color = sel.options[sel.selectedIndex].getAttribute('textcolor');
        					$("#large-text-input").css("color",color);
        				});
        			</script>
    </body>

  • Users who have thanked xelawho for this post:

    mahoganman (06-11-2014)

  • #5
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes, that works perfectly! Thank you for that. I am not sure exactly how or why it works versus the my previous attempt. But I am glad it does. Thanks again.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    FYI...

    it works because this:
    Code:
    var color = $("#color_combo").attr('textcolor');
    says "get the 'textcolor' attribute from the select tag", but the select tag has no such attribute, so that would be undefined at best

    whereas this:
    Code:
    var sel= $(this)[0];
    var color = sel.options[sel.selectedIndex].getAttribute('textcolor');
    says "get the 'textcolor' attribute from the option tag that was selected from the select box" which is pretty much what you wanted to do


  • Users who have thanked xelawho for this post:

    mahoganman (06-12-2014)

  • #7
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I see now where I went wrong and where this makes sense. Thanks for the great explanation of how it works!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •