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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HELP with SELECTED attridute

    Is it possible to modify the following JAVASCRIPT and HTML/php so whatever value is passed to the '$item_selected_color' variable will be the selected item AND that item will be displayed as the initial image?

    Thank You!

    Code:
    		 <SCRIPT LANGUAGE="javascript">
    
             GarmentColorArray = new Array (8);
    
                GarmentColorArray[1] = "POJ00215.jpg";
    
                GarmentColorArray[2] = "POJ00216.jpg";
    
                GarmentColorArray[3] = "POJ00217.jpg";
    
                GarmentColorArray[4] = "POJ00218.jpg";
    
                GarmentColorArray[5] = "POJ00219.jpg";
    
                GarmentColorArray[6] = "POJ00220.jpg";
    
                GarmentColorArray[7] = "POJ00221.jpg";
    
                GarmentColorArray[8] = "POJ00222.jpg";
    
                function GarmentColorImageSwap(imgBase,imgIndex)
                 {
                Index = imgIndex + 1;
                document.GarmentColorImage.src = '/images/thumbs/' +
                   GarmentColorArray[Index];
                 }
    
     			</SCRIPT>
    
                <!-- Garment Color = custom20-->
    				<SELECT NAME="custom20"
    				 ONCHANGE="GarmentColorImageSwap('GarmentColorImage', this.selectedIndex)" SIZE="1">
    
    				  			<?php
    
    				  			$item_selected_style = $_GET['item_selected_color'];
    				 			$item_prod_name = $_GET['item_selected_size'];
    
    			echo "
    
    					<OPTION VALUE='$item_selected_color'>$item_selected_color</OPTION>
    					<OPTION VALUE='Color:&nbsp;RED Hibiscus'>RED Hibiscus</OPTION>
    					<OPTION VALUE='Color:&nbsp;Dark Blue Hibiscus'>Dark Blue Hibiscus</OPTION>
    					<OPTION VALUE='Color:&nbsp;Turquoise Hibiscus'>Turquoise Hibiscus</OPTION>
    					<OPTION VALUE='Color:&nbsp;Purple Hibiscus'>Purple Hibiscus</OPTION>
    					<OPTION VALUE='Color:&nbsp;White'>White</OPTION>
    					<OPTION VALUE='Color:&nbsp;American Flag'>American Flag</OPTION>
    					<OPTION VALUE='Color:&nbsp;Hundred Dollar Bill'>Hundred Dollar Bill</OPTION>
    				</SELECT>

  • #2
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Yes, but that's a PHP question, it has nothing to do with JavaScript. You need to handle it on the server-side before the script produces the markup and JS code.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,658
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    Actually, there is a way to do this that depends on the JS coding. The PHP code cooperates with the JS and vice versa. I'm not a PHP person, but I've used this same technique with ASP for years.
    Code:
    <script type="text/javascript">
    GarmentColorArray = ["POJ00215.jpg","POJ00216.jpg","POJ00217.jpg","POJ00218.jpg",
                         "POJ00219.jpg","POJ00220.jpg","POJ00221.jpg","POJ00222.jpg" ];
    
    function chooseGarmentColorByValue( val )
    {
        var sel = document.forms[0].custom20;
        for ( var i = 0; i < sel.options.length; ++i )
        {
            if ( sel.options[i].value == val )
            {
                sel.selectedIndex = i;
                GarmentColorImageSwap(i);
            }
        }
    }
    
    function GarmentColorImageSwap(index)
    {
        document.GarmentColorImage.src = '/images/thumbs/' + GarmentColorArray[index];
    }
    </script>
    
    ...
    <?php
        $item_selected_color = $_GET['item_selected_color'];
        ... other php stuff...
    ?>
    
    <body onload="chooseGarmentColorByValue('<?= $item_selected_color ?>');">
    
    <SELECT NAME="custom20"
            ONCHANGE="GarmentColorImageSwap(this.selectedIndex);">
    	<OPTION VALUE='Color:&nbsp;RED Hibiscus'>RED Hibiscus</OPTION>
    	<OPTION VALUE='Color:&nbsp;Dark Blue Hibiscus'>Dark Blue Hibiscus</OPTION>
    	<OPTION VALUE='Color:&nbsp;Turquoise Hibiscus'>Turquoise Hibiscus</OPTION>
    	<OPTION VALUE='Color:&nbsp;Purple Hibiscus'>Purple Hibiscus</OPTION>
    	<OPTION VALUE='Color:&nbsp;White'>White</OPTION>
    	<OPTION VALUE='Color:&nbsp;American Flag'>American Flag</OPTION>
    	<OPTION VALUE='Color:&nbsp;Hundred Dollar Bill'>Hundred Dollar Bill</OPTION>
    </SELECT>
    When what is passed into the page on the server doesn't lend itself to easily choosing the correct option via server-side code, just create a JS function that can choose an option by value and then invoke it at page load time, something like the above.

    You could even code it as simply
    Code:
    <body onload="chooseGarmentColorByValue('<?= $_GET['item_selected_color'] ?>');">

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant!

    I am very sorry, but I am VERY unfamilar with JS scripting-could I get a little more specific help here?

    Script does not seem to work as far as taking the passed value and making it the selected value/image on the dropdown list. Do the fikle names in the 'GarmentColorArray' need to match the values in the VALUEs of the SELECT function?

    Thanks!

    Gary

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,658
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    The value in the $_GET must match the VALUE= in one of the <option>s.

    So, for example, if you wanted to have this option preselected:
    Code:
    	<OPTION VALUE='Color:&nbsp;Dark Blue Hibiscus'>Dark Blue Hibiscus</OPTION>
    then the value of
    Code:
    $_GET['item_selected_color']
    must be
    Code:
    Color:&nbsp;Dark Blue Hibiscus
    That should happen naturally, as the user chooses that option in the <select>.

    If something is going wrong, the &nbsp; in there may be the culprit. Try changing the &nbsp; to just an ordinary space. It should still be just fine.

    If it still doesn't work, then bring the page up in the browser and do a VIEW-->>SOURCE (or PAGE SOURCE) and show us the relevant HTML (*not* the PHP code).

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I need to pass the the variable '$item_prod_name'. That is the point in setting the _GET code to:

    Code:
    $item_prod_name = $_GET['item_selected_size'];
    The value is being properly passed out of the previous page, but I need to GET it on this page AND be able to change the garment color with the select statement we are working on.

    Can this be done?

    Thanks again for all of your help!

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,658
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    Sorry, you have never shown us the <form> where you have some field named "item_selected_size". I was just using the names you used in your first post, so I'm unaware of whe the previous page looks like.

    Show that field as it exists on the previous page.

  • #8
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The following JS works in conjunction with the given form(You sent me this code as modified from the first code I posted on the forum question in this post). The purpose of this code is for the user to be able to select the COLOR they choose to use from the dropdown list. Once chosen, a image of the selected OPTION is displayed (from array). I need for the SELECTED OPTION and image (the initial image) to be passed from the previous webpage. There is no field by the name of 'item_selected_color' but rather is a variable that is passed from the previous page that I am trying GET on this page and place into the line of code:

    Code:
    <body onload="chooseGarmentColorByValue('<?= $item_selected_color ?>');">
    which you sent me.

    Code:
    <script type="text/javascript">
    GarmentColorArray = ["POJ00215.jpg","POJ00216.jpg","POJ00217.jpg","POJ00218.jpg",
                         "POJ00219.jpg","POJ00220.jpg","POJ00221.jpg"];
    
    function chooseGarmentColorByValue( val )
    {
        var sel = document.forms[0].custom20;
        for ( var i = 0; i < sel.options.length; ++i )
        {
            if ( sel.options[i].value == val )
            {
                sel.selectedIndex = i;
                GarmentColorImageSwap(i);
            }
        }
    }
    
    function GarmentColorImageSwap(index)
    {
        document.GarmentColorImage.src = '/images/thumbs/' + GarmentColorArray[index];
    }
    </script>
    
    <?php
        $item_selected_color = $_GET['item_selected_color'];
    ?>
    
    <body onload="chooseGarmentColorByValue('<?= $item_selected_color ?>');">
    
    <SELECT NAME="custom20"
            ONCHANGE="GarmentColorImageSwap(this.selectedIndex);">
    	<OPTION VALUE='Color:&nbsp;RED Hibiscus'>RED Hibiscus</OPTION>
    	<OPTION VALUE='Color:&nbsp;Dark Blue Hibiscus'>Dark Blue Hibiscus</OPTION>
    	<OPTION VALUE='Color:&nbsp;Turquoise Hibiscus'>Turquoise Hibiscus</OPTION>
    	<OPTION VALUE='Color:&nbsp;Purple Hibiscus'>Purple Hibiscus</OPTION>
    	<OPTION VALUE='Color:&nbsp;White'>White</OPTION>
    	<OPTION VALUE='Color:&nbsp;American Flag'>American Flag</OPTION>
    	<OPTION VALUE='Color:&nbsp;Hundred Dollar Bill'>Hundred Dollar Bill</OPTION>
    </SELECT>

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,658
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    *sigh*

    The ONLY WAY to pass a "variable" from one page to another is via either a query string or a <FORM METHOD=POST> (or a simulation thereof using XMLHTTP, but I presume that is irrelevant to this discussion).

    Since you are doing
    Code:
    <?php
        $item_selected_color = $_GET['item_selected_color'];
    ?>
    you *must* be sending that value in a query string.

    Normally, you would do that via
    Code:
    <form method="GET" action="xxx.php">
    ...
    <select name="item_selected_color">
    ...
    </select>
    ...
    If you are NOT doing that, then HOW are you sending the variable from the prior page? And WHAT VALUES can it have?

    I foolishly assumed that you had a <form method=get> on the prior page and indeed you had a <select> there and indeed that <select> had the same values as the custom20 <select> on the current page.

    Mea culpa. I should never have assumed.

  • Users who have thanked Old Pedant for this post:

    imimin (06-04-2009)

  • #10
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am passing the value of '$item_selected_color' from the previous page via the following php code (see code in red):

    Code:
    		<?php
    	    $prod_code = $_GET['prod_code'];
    	    $get_items = "SELECT * FROM poj_products WHERE cat='$cat'";
    		$get_items = mysql_query($get_items);
    
    
    
    		while($item_row = mysql_fetch_array($get_items)){
    			$item_img = $item_row['img'];
    			$item_prod_name = $item_row['prod_name'];
    			$item_prod_code = $item_row['prod_code'];
    			$item_retail = $item_row['retail'];
    			$item_selected_style = $item_row['selected_style'];
    			$item_selected_color = $item_row['selected_color'];
    			$item_selected_size = $item_row['selected_size'];
    			$item_weight = $item_row['weight'];
    
    
    		}
    
    
    
    			echo "<A HREF=\"$sitelocation" . "poj_order_form.php" . "?" . "item_prod_name=" . "$item_prod_name" . "&" ."item_selected_style=" . "$item_selected_style". "&" ."item_selected_color=" . "$item_selected_color". "&" ."item_retail=" . "$item_retail". "&" ."item_prod_code=" . "$item_prod_code" . "&" . "item_img=" . "$item_img" . "&" . "item_selected_size=" . "$item_selected_size" . "&" . "item_weight=" . "$item_weight\"><IMG SRC=\"/images/order_now.jpg\" BORDER=\"0\"></A>";
    
    
    			      ?>
    The only thing I need help with at this point is the JS/Form(dropdown list) that receives the value of '$item_selected_color'. This code should do the following: display the passed value of '$item_selected_color' as the initial SELECTED value in the dropdown list AND displaying the the image of the SELECTED value. The user can select a different color from the dropdown list and when he does, the image will change displaying an image of the users newly selected choice of color.

    Thank you for your help!


  •  

    Posting Permissions

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