...

View Full Version : HELP with SELECTED attridute



imimin
05-16-2009, 07:35 PM
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!


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

bdl
05-17-2009, 12:53 AM
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.

Old Pedant
05-17-2009, 05:45 AM
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.



<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


<body onload="chooseGarmentColorByValue('<?= $_GET['item_selected_color'] ?>');">

imimin
05-25-2009, 07:00 AM
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

Old Pedant
05-26-2009, 01:05 AM
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:


<OPTION VALUE='Color:&nbsp;Dark Blue Hibiscus'>Dark Blue Hibiscus</OPTION>

then the value of


$_GET['item_selected_color']

must be


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).

imimin
05-27-2009, 07:15 AM
I need to pass the the variable '$item_prod_name'. That is the point in setting the _GET code to:


$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!

Old Pedant
05-27-2009, 07:57 AM
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.

imimin
05-27-2009, 06:51 PM
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:


<body onload="chooseGarmentColorByValue('<?= $item_selected_color ?>');">

which you sent me.


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

Old Pedant
05-27-2009, 10:04 PM
*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

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

Normally, you would do that via

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

imimin
05-29-2009, 07:02 PM
I am passing the value of '$item_selected_color' from the previous page via the following php code (see code in red):


<?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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum