PDA

Click to See Complete Forum and Search --> : Changing drop down menu values from a image link

rshandy
10-08-2003, 07:11 PM
I was wondering whether anyone could help me in figuring out how to change values in a drop down menu (as well as hidden input values) by simply clicking on image links (<a = OnCick="...> on the same web page.

I can swap images, and was able to change drop values from a primary drop down, but I can't figure out how to combine the functions of image swap, drop value change and hidden input values from a single image link.

Any help would be greatly appreciated!!!!


Thanks,

Rich
Dimitri
10-08-2003, 07:19 PM
Show us all the code that you've been using and want to combine.

Dimitri
rshandy
10-08-2003, 08:59 PM
Hi Dimitri:

Thanks so much. I've pasted the code below. Basically, I would like to combine the functions of image swapping (swap_test_r2_c2_clr2.gif) with the drop down value change, as well as changing some hidden input tags and some general text. Each graphic would correspond to a different large picture and different drop value (selected value) and different hidden input tag data. Would also like it to work reciprocally if possible (by picking the color in the drop and have the big graphic change with the hidden input data)

Thanks,

Rich

<html>

<head>

<title>Swap test</title>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">


team = new Array(
<!--Almond-->
new Array(
new Array("Almond"),
new Array("Black"),
new Array("Green")
),
<!--Green-->
new Array(
new Array("Green"),
new Array("Almond"),
new Array("Black")
),
<!--Black-->
new Array(
new Array("Black"),
new Array("Green"),
new Array("Almond")
)
);

function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem) {
var i, j;
var prompt;
// empty existing items
for (i = selectCtrl.options.length; i >= 0; i--) {
selectCtrl.options[i] = null;
}
prompt = (itemArray != null) ? goodPrompt : badPrompt;
if (prompt == null) {
j = 0;
}
else {
selectCtrl.options[0] = new Option(prompt);
j = 1;
}
if (itemArray != null) {
// add new items
for (i = 0; i < itemArray.length; i++) {
selectCtrl.options[j] = new Option(itemArray[i][0]);
if (itemArray[i][1] != null) {
selectCtrl.options[j].value = itemArray[i][1];
}
j++;
}
// select first item (prompt) for sub list
selectCtrl.options[0].selected = true;
}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}


//-->
//-->
</Script>

</head>



<body bgcolor="#ffffff" leftmargin="0" topmargin ="0" marginwidth="0" marginheight="0" >

<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign="top" >

</td>

<td valign="top" width="380" >
<form ACTION="noparse#http://www.xyz.com" METHOD="POST">




<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3"><img src="images/transparent.gif" width="20" height="6" align="top"></td>


<td>&nbsp; </td>



</tr>



<tr>

<td>


<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="190"><img name="swap_test_r2_c4" src="images/swap_test_r2_c4.jpg" width="157" height="200" border="0" alt=""></td>
<td width="16"><img src="images/transparent.gif" width="16" height="20" align="texttop"></td>
<td height="1" width="153">
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr valign="bottom">
<td colspan="3"> <br>
</td>
</tr>
<tr>
<td ><img src="images/transparent.gif" width="1" height="1"><br>
</td>
<td><img src="images/transparent.gif" width="100" height="5"><br>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="146">
<tr>
<td valign="top"><img src="images/transparent.gif" width="2" height="4"></td>
<td valign nowrap>Reg. Price</td>
<td valign="top" width="4"><img src="images/transparent.gif" width="4" height="4"></td>
<td align="left" nowrap >
<div align="left"><font face="Helvetica"><small><img name="normpricetest_1" src="images/normpricetest_1.gif" border="0" alt="" align="middle"></small></font></div>
</td>
</tr>
<tr>
<td valign="top" width="2">&nbsp;</td>
<td valign="bottom" nowrap><font color="#990000">Our
Price</font></td>
<td valign="top" width="4">&nbsp;</td>
<td align="left" nowrap valign="bottom">
<div align="left"><font face="Helvetica"><small><img src="images/transparent.gif" width="60" height="2" border="0"><br>
<img name="pricetest_1" src="images/pricetest_1.gif" border="0" alt=""></small></font>
</div>
</td>
</tr>
<tr>
<td valign="top" width="2" rowspan="4"></td>
<td align="left" colspan="3" ><img src="images/transparent.gif" width="60" height="3" border="0"></td>
</tr>
<tr>
<td align="center" valign="middle" colspan="3" CLASS="steps">
<img src="http://www.infant-car-seats.com/scstore/images/transparent.gif" width="26" height="6"><br>
Color
<SELECT NAME="Team" size="1">
<option value="-1" selected> Color/Style</option>
</SELECT>
<br>
</td>
</tr>
</table>
</td>
<td ><img src="images/transparent.gif" width="1" height="1"><br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="190"><img src="images/transparent.gif" width="16" height="20" align="texttop"></td>
<td rowspan="2" width="16">&nbsp;</td>
<td height="155" valign="top" rowspan="2" width="153"><select size="1" name="Color" onChange="fillSelectFromArray(this.form.Team, ((this.selectedIndex == -1) ? null : team[this.selectedIndex-1]));">
<option value="-1" selected>Select Color
<option value=1>1
<option value=2>2
<option value=3>3
</select> </td>
</tr>
<tr>
<td height="98" valign="top" width="190"> <a onClick="MM_swapImage('swap_test_r2_c4','','images/swap_test_r2_c4.jpg',0);MM_swapImage('pricetest_1','','images/pricetest_1.gif',1);MM_swapImage('normpricetest_1','','images/normpricetest_1.gif',1)"><img name="swap_test_r2_c2" src="images/swap_test_r2_c2.jpg" width="43" height="45" border="0" alt=""></a><img src="images/transparent.gif" width="16" height="20" align="texttop">
<a onClick="MM_swapImage('swap_test_r2_c4','','images/swap.jpg',1);MM_swapImage('pricetest_1','','images/pricetest_2.gif',1);MM_swapImage('normpricetest_1','','images/normpricetest_2.gif',1)"><img name="swap_test_r2_c2_clr2" src="images/swap_test_r2_c2_clr2.gif" width="43" height="45" border="0" alt=""></a>
<img src="images/transparent.gif" width="16" height="20" align="texttop">
<a onClick="MM_swapImage('swap_test_r2_c4','','images/swap_3.jpg',0);MM_swapImage('pricetest_1','','images/pricetest_3.gif',1);MM_swapImage('normpricetest_1','','images/normpricetest_3.gif',1)"><img name="swap_test_r2_clr3" src="images/swap_test_r2_c2_clr3.gif" width="43" height="45" border="0" alt=""></a></td>
</tr>
</table>

</td>

</tr>

<tr>


<td>
</td>

</tr>



</table></form>

</td>

</tr>

</table>

</body>

</html>
Dimitri
10-09-2003, 01:39 PM
Can you tell us the link of this page online, so we can see it in action? You use a lot of images and I can't tell what's what, because I don't have these images on my computer (so all I see are a bunch of broken images).

D
rshandy
10-09-2003, 02:47 PM
Here's the link: http://www.infant-car-seats.com/swap3x.html

As you can see, I'd like the color swatches to not only change the main graphic and the price graphic, but also change the color choice in the drop down as well as add appropriate hidden data (sku and price info, etc.)

Thanks.
Dimitri
10-09-2003, 03:37 PM
Here's PART of what you asked for. If you click the color swatch, it updates the select form field.

Why are you creating javascript arrays of the colors, but then hard-coding everything else (like the dog images) in HTML?

That's not good. I can't fix this page without either 1) making it look very very ugly and a pain to update (because everything is hardcoded in html) or 2) rewriting the page so that the HTML is dynamically generated from javascript based on arrays (which should also include the images of all the dogs, etc.)

Either way is way too much trouble for me to do (for free). I hope you understand.

Cheers and good luck.
Dimitri

============================


<html>

<head>

<title>Swap test</title>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">


team = new Array(
<!--Almond-->
new Array(
new Array("Almond"),
new Array("Black"),
new Array("Green")
),
<!--Green-->
new Array(
new Array("Green"),
new Array("Almond"),
new Array("Black")
),
<!--Black-->
new Array(
new Array("Black"),
new Array("Green"),
new Array("Almond")
)
);

function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem) {
var i, j;
var prompt;
// empty existing items
for (i = selectCtrl.options.length; i >= 0; i--) {
selectCtrl.options[i] = null;
}
prompt = (itemArray != null) ? goodPrompt : badPrompt;
if (prompt == null) {
j = 0;
}
else {
selectCtrl.options[0] = new Option(prompt);
j = 1;
}
if (itemArray != null) {
// add new items
for (i = 0; i < itemArray.length; i++) {
selectCtrl.options[j] = new Option(itemArray[i][0]);
if (itemArray[i][1] != null) {
selectCtrl.options[j].value = itemArray[i][1];
}
j++;
}
// select first item (prompt) for sub list
selectCtrl.options[0].selected = true;
}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}


//-->
//-->
</Script>

</head>



<body bgcolor="#ffffff" leftmargin="0" topmargin ="0" marginwidth="0" marginheight="0" >

<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign="top" >

</td>

<td valign="top" width="380" >
<form ACTION="noparse#http://www.xyz.com" METHOD="POST">




<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3"><img src="images/transparent.gif" width="20" height="6" align="top"></td>


<td>&nbsp; </td>



</tr>



<tr>

<td>


<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="190"><img name="swap_test_r2_c4" src="images/swap_test_r2_c4.jpg" width="157" height="200" border="0" alt=""></td>
<td width="16"><img src="images/transparent.gif" width="16" height="20" align="texttop"></td>
<td height="1" width="153">
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr valign="bottom">
<td colspan="3"> <br>
</td>
</tr>
<tr>
<td ><img src="images/transparent.gif" width="1" height="1"><br>
</td>
<td><img src="images/transparent.gif" width="100" height="5"><br>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="146">
<tr>
<td valign="top"><img src="images/transparent.gif" width="2" height="4"></td>
<td valign nowrap>Reg. Price</td>
<td valign="top" width="4"><img src="images/transparent.gif" width="4" height="4"></td>
<td align="left" nowrap >
<div align="left"><font face="Helvetica"><small><img name="normpricetest_1" src="images/normpricetest_1.gif" border="0" alt="" align="middle"></small></font></div>
</td>
</tr>
<tr>
<td valign="top" width="2">&nbsp;</td>
<td valign="bottom" nowrap><font color="#990000">Our
Price</font></td>
<td valign="top" width="4">&nbsp;</td>
<td align="left" nowrap valign="bottom">
<div align="left"><font face="Helvetica"><small><img src="images/transparent.gif" width="60" height="2" border="0"><br>
<img name="pricetest_1" src="images/pricetest_1.gif" border="0" alt=""></small></font>
</div>
</td>
</tr>
<tr>
<td valign="top" width="2" rowspan="4"></td>
<td align="left" colspan="3" ><img src="images/transparent.gif" width="60" height="3" border="0"></td>
</tr>
<tr>
<td align="center" valign="middle" colspan="3" CLASS="steps">
<img src="http://www.infant-car-seats.com/scstore/images/transparent.gif" width="26" height="6"><br>
Color
<SELECT NAME="Team" size="1">
<option value="-1" selected> Color/Style</option>
</SELECT>
<br>
</td>
</tr>
</table>
</td>
<td ><img src="images/transparent.gif" width="1" height="1"><br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="190"><img src="images/transparent.gif" width="16" height="20" align="texttop"></td>
<td rowspan="2" width="16">&nbsp;</td>
<td height="155" valign="top" rowspan="2" width="153"><select size="1" name="Color" onChange="fillSelectFromArray(this.form.Team, ((this.selectedIndex == -1) ? null : team[this.selectedIndex-1]));">
<option value="-1" selected>Select Color
<option value=1>1
<option value=2>2
<option value=3>3
</select> </td>
</tr>
<tr>
<td height="98" valign="top" width="190">
<a onClick="fillSelectFromArray(document.forms[0].Team,team[0]);MM_swapImage('swap_test_r2_c4','','images/swap_test_r2_c4.jpg',0);MM_swapImage('pricetest_1','','images/pricetest_1.gif',1);MM_swapImage('normpricetest_1','','images/normpricetest_1.gif',1)"><img name="swap_test_r2_c2" src="images/swap_test_r2_c2.jpg" width="43" height="45" border="0" alt=""></a><img src="images/transparent.gif" width="16" height="20" align="texttop">
<a onClick="fillSelectFromArray(document.forms[0].Team,team[1]);MM_swapImage('swap_test_r2_c4','','images/swap.jpg',1);MM_swapImage('pricetest_1','','images/pricetest_2.gif',1);MM_swapImage('normpricetest_1','','images/normpricetest_2.gif',1)"><img name="swap_test_r2_c2_clr2" src="images/swap_test_r2_c2_clr2.gif" width="43" height="45" border="0" alt=""></a>
<img src="images/transparent.gif" width="16" height="20" align="texttop">
<a onClick="fillSelectFromArray(document.forms[0].Team,team[2]);MM_swapImage('swap_test_r2_c4','','images/swap_3.jpg',0);MM_swapImage('pricetest_1','','images/pricetest_3.gif',1);MM_swapImage('normpricetest_1','','images/normpricetest_3.gif',1)"><img name="swap_test_r2_clr3" src="images/swap_test_r2_c2_clr3.gif" width="43" height="45" border="0" alt=""></a></td>
</tr>
</table>

</td>

</tr>

<tr>


<td>
</td>

</tr>



</table></form>

</td>

</tr>

</table>

</body>

</html>

----------------------------
rshandy
10-09-2003, 04:30 PM
Thank you Dimitri:

The reason why I have "mixed code" is... I'm a rookie. I'm hoping to rewrite it once I finish all the functionality.

One last question if I may. Could you tell me how to incorporate writing an input tag (<input type=hidden...>)into that same form from the same onClick color swatch function??!!!

Extremely grateful.

thanks.

Rich