Click to See Complete Forum and Search --> : Swap two elements with onChange?


Foamy
06-13-2003, 01:53 PM
With the gracious help of other on this board, I was was able to swap images based on what was selected in a pull-down menu.

Now I would like to use the same function to replace the value of a hidden field with value of the selected option.

Here's the relevant JS

function previewPicJN(sel) {
document.previewpicJN.src = mylabelJN[sel.selectedIndex];
document.op1.value = myvalueJN[sel.selectedIndex];
}

mylabelJN = new Array("/images/jn/BEEF-RICE--W_O--CUT-100.jpg", "/images/jn/LAMB-RICE-W_O-CUT-100.jpg", "/images/jn/beef-lamb.jpg");
myvalueJN = new Array("Beef", "Lamb", "Mixed (Beef,Lamb)");



And here's the form:

<form method="post" action="http://www.cartserver.com/sc/cart.cgi">
<input type="hidden" name="op1" value="Beef">
<td align="center" rowspan="2"><select name=flavorsJN size=1 onChange="previewPicJN(this)">
<option myvalueJN="Beef" mylabelJN="/images/jn/BEEF-RICE--W_O--CUT-100.jpg" selected >Beef & Rice
<option myvalueJN="Lamb" mylabelJN="/images/jn/LAMB-RICE-W_O-CUT-100.jpg">Lamb & Rice
<option myvalueJN="Mixed (Beef, Lamb)" mylabelJN="/images/jn/beef-lamb.jpg">1/2 Beef, 1/2 Lamb
</select></td>
<td align="center"><input type="image" border="0" name="add" src="/images/common/order.gif"></td>
<td align="center" rowspan="2"><img name="previewpicJN" src="/images/jn/BEEF-RICE--W_O--CUT-100.jpg" width=100 height=125 border=0></td>
<td></td>
</form>


The images swap just fine, but the value of op1 does not; it remains as Beef. I know I can rename the pulldown op1 and pass the value that way, but there are other forms on the page that also have the hidden op1 input, but don't have the pull-down.

Thanks for any suggestions or pointers you might have for a total JS newbie.

Here's a link to the page in question
http://171.65.19.77/jerkynaturals/index.html

cacalex
07-10-2003, 02:58 PM
I'm sure a understand you probleme well...

Try this anyway :

function previewPicJN(sel) {

mylabelJN = new Array("/images/jn/BEEF-RICE--W_O--CUT-100.jpg", "/images/jn/LAMB-RICE-W_O-CUT-100.jpg", "/images/jn/beef-lamb.jpg");
myvalueJN = new Array("Beef", "Lamb", "Mixed (Beef,Lamb)");


document.previewpicJN.src = mylabelJN[sel.selectedIndex];
document.op1.value = "";
document.op1.value = myvalueJN[sel.selectedIndex];
}