Simple code help needed - option buttons

[Deidre]

I'm very new to JavaScript, so please forgive my ignorance. I have a form with a dropdown list that picks a product, and a group of option boxes to pick the media that product is available in. Some products are not available in all media (there are a max of 4 types). I've programmed in other languages so I figure what I need to do is read the selected product from the product list, then display (or hide) the media options based on that selection.

The drop down list is product, the radio buttons are media. Where do I put my script? How do I determine which element of the product array was selected? How can I change (or eliminate) an option button/option text?

Thanks so much.
Deidre

[Willy Duitt]

If I understood your post correctly, this may help.
If not please post an example of what you are working on...

[adios]

-----

[Willy Duitt]

BTW: Welcome back adios.
I noticed you were on a walkabout as of late.....

.....Willy

Edit: Hmmmm;

After looking at all of your posts removed in this thread.
Perhaps you were not on walkabout but simply picked up and took your ball home.

[Deidre]

Thanks so much Willy & Adios. Adios' code looks like its what I need. Will have to try it out before I know if I have more questions. One question I do know I have is that I have to send this resulting choice to a cfm page. If the choice of product is "Volume 1" (item description) and the choice of media is "CD:15.00:2" (second part of the item description:item price:units), how do I send the concatenation of those 2 vars to the cfm page?

Do I store the objects (product.selected.value and media.selected.value) to vars and send the vars? What would the <a href> to the page look like? Right now it goes something like this:
<a href="http://ww4.aitsafe.com/cf/add.cfm?&blueshorts:17.00:2" where "blue shorts" is the item, 17.00 is the price and 2 is the units. I haven't been able to figure out how to expand the vars so the page I'm sending to will understand it.

Thanks again,
Deidre

[adios]

-----

[Deidre]

I'm not using Cold Fusion, just html. I've included (below) the stripped down code, starting at the form tag. I'm using "Blue Shorts" as the product name, 29.50 as the price and 2 as the units. I don't know what to put in the place of these values. My real product name is the value of the selected product (below) plus the value of the first part of the selected media (ie, Book, CD, etc) and the price and units are appended as part of the value of the selected media with colons. This is the format I need to use to send the order to an ecom site. Does this help clear it up?


<FORM METHOD="POST" name=ecomform action="http://ww4.aitsafe.com/cf/add.cfm?productpr=Blue+Shorts:29.50:2">


<table border="0" width="94%" height="1">

<select size="4" name="product" id="product">
<option value="Vol1">Volume 1</option>
<option value="Vol2">Volume 2</option>
<option value="Vol3">Volume 3</option>
<option value="Vol4">Volume 4</option>
<option value="Vol5">Volume 5</option>

</select>

</td>
<td>
Microfiche<input type="radio" value=""Microfiche:7.00:2" checked name="media">
</td>
</tr>
<tr>
<td>
Printed Book<input type="radio" name="media" value="PrintedBook:19.50:2">
</td>
</tr>
<tr>
<td>e-Book<input type="radio" name="media" value="eBook:15.00:1">
</td>
</tr>
<tr>
<td>CD<input type="radio" name="media" value="CD:15.00:2">
</td>
</tr>
</table>
<input type="submit" value="Buy Now" name="Bbuynow">
<input type="reset" value="Reset Form" name="Breset">
</form>

[glenngv]

When the form is submitted, the selected items in a combobox and radio button gets submitted to the server. So just retrieve the value of the "product" combobox and the value of "media" radio button in the server-side (cfm) and do the concatenation there.

[Deidre]

I have no control over the server. I am submitting the data to an ecom site, then returning to my own site with a "return=" property.

[glenngv]

function addParam(f){
   var mediaValue='';
   for (var i=0;i<f.media.length;i++) {
        if (f.media[i].checked) {
             mediaValue=f.media[i].value;
             break;
        }
   }
   f.action += "?productpr=" + escape(f.product.options[f.product.selectedIndex].value + ":" + mediaValue);
}
...
<FORM METHOD="POST" name="ecomform" action="http://ww4.aitsafe.com/cf/add.cfm" onsubmit="addParam(this)">

[Deidre]

Thanks so much, Glenn. Its not working, yet, but perhaps you could explain the code to me and I can fix it. What is f.media.length? Media is the name of the option group, so is this the number of options in media? If so, should I substitute the form name for "f."? The debugger is telling me that f.media.length is not an object. Should I replace the "f" in the addparam line, too?

I'm not just looking for someone to write the code for me, I'd like to learn this.

Thanks,
Dee

[Willy Duitt]

I'm not sure if Glenn is around at this time of day. But f is the form reference. How are you calling the function? Did you add the onsubmit to the form as in his example?

<FORM METHOD="POST" name="ecomform" action="http://ww4.aitsafe.com/cf/add.cfm" onsubmit="addParam(this)">

[Deidre]

Thanks for your help Willy. Yes, that's exactly how I'm calling the function. Maybe, because its referring to "this", I don't have it in the right place. No, that can't be it, since the function has to be on the start line of the form. Is this something I have to test out by actually running it on my server?

[Willy Duitt]

As I said, this refers to the form and that is not your problem. I just ran the codes and they work fine as written provided you are implementing them correctly.

Here is the return:

?productpr=Vol2%3APrintedBook%3A19.50%3A2

Perhaps you should post the codes you are working with so someone could see how you implemented the script....

......Willy

[Deidre]

Willy,

I hesitated to do that because its long and contains lots of unimportant stuff, but since I'm not getting the same results as you, here it is:

<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta name=vs_defaultClientScript content="JavaScript">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<title>Price List</title>
<!-- FILE NAME ecom.htm -->
<!-- Pricing and Ordering Information -->
<link rel="stylesheet" type="text/css" href="./">
<meta name="Microsoft Theme" content="copy-of-corporate 1011, default">
<meta name="Microsoft Border" content="l">
</head>
<body>

<H1 align="center"><font color="#FF0000" face="Dauphin" size="5">Price List &amp; Order Form<br>
</font><IMG src="rwb_line.gif" width="540" height="8">
</H1>
<p align="center"><font color="#003399">Select the Volume # you want to
purchase,</font><font color="#003399" size="3"><br>
then click on the Media button desired ...&nbsp;<br>
</font></p>
<p align="center"><b><font size="4">Price List - All Volumes</font></b></p>
<table border="0" width="94%" height="1">
<tr>
<td width="25%" height="28" align="center">Microfiche</td>
<td width="25%" height="28" align="center">Book</td>
<td width="25%" height="28" align="center">e-Book</td>
<td width="25%" height="28" align="center">CD</td>
</tr>
<tr>
<td width="25%" valign="middle" bgcolor="#0000FF" height="44" align="center"><font color="#FFFFFF">$7.00</font></td>
<td width="25%" valign="middle" bgcolor="#0000FF" height="44" align="center"><font color="#FFFFFF">$19.50</font></td>
<td width="25%" valign="middle" bgcolor="#0000FF" height="44" align="center"><font color="#FFFFFF">$15.00</font></td>
<td width="25%" valign="middle" bgcolor="#0000FF" height="44" align="center"><font color="#FFFFFF">$15.00</font></td>
</tr>
</table>
<p align="center"><b><font size="4">Order Form</font></b></p>




<FORM METHOD="POST" name="ecomform" action="http://ww4.aitsafe.com/cf/add.cfm" onsubmit="addParam(this)">
<script>


<INPUT TYPE="hidden" NAME="userid" VALUE="6968133">
<input type="hidden" name="return" value="www.patriotpublishers.com/ecomfram.htm">
<div align="center">
function addParam(f){
var mediaValue='';
for (var i=0;i<f.media.length;i++) {
if (f.media[i].checked) {
mediaValue=.media[i].value;
break;
}
}
f.action += "?productpr=" + escape(f.product.options[f.product.selectedIndex].value + ":" + mediaValue);
}
</script>

<table border="1" cellspacing="1" width="79%">

<tr>
<td width="32%"><font color="#EE0000" size="2"><b>2. Select
Volume#</b></font></td>
<td width="33%" colspan="2"><font color="#EE0000" size="2"><b>1.
Select Media Type</b></font></td>
<td width="31%"><font color="#EE0000" size="2"><b>Price</b></font></td>
</tr>
<tr>
<td width="32%" rowspan="4">
<select size="4" name="product" tabindex="1" style="font-family: Arial; font-size: 12pt; font-weight: bold" id="product">

<option value="Vol1">Volume 1</option>
<option value="Vol2">Volume 2</option>
<option value="Vol3">Volume 3</option>
<option value="Vol4">Volume 4</option>
<option value="Vol5">Volume 5</option>
<option value="Vol6">Volume 6</option>
<option value="Vol7">Volume 7</option>
<option value="Vol8">Volume 8</option>
<option value="Vol9">Volume 9</option>
<option value="Vol10">Volume 10</option>
<option value="Vol11">Volume 11</option>
<option value="Vol12">Volume 12</option>
<option value="Vol13">Volume 13</option>
<option value="Vol14">Volume 14</option>
<option value="Vol15">Volume 15</option>
<option value="Vol16">Volume 16</option>
<option value="Vol17">Volume 17</option>
<option value="Vol18">Volume 18</option>
<option value="Vol19">Volume 19</option>
<option value="Vol20">Volume 20</option>
</select>

</td>
<td width=20% align=right height="25"><font size="2">Microfiche</font>
</td>
<td width="12%" height="25">
<input type="radio" checked name="media" value="Microfiche:7.00:2"</td>
<td width="31%" height="25">$7.00</td>

</tr>
<tr>
<td width="20%" align="right"><font size="2">Printed
Book</font></td>
<td width="12%" height="25">
<input type="radio" name="media" value="Printed Book:19.50:2"></td>
<td width="30%">$19.50</td>
</tr>
<tr>
<td width="20%" align="right"><font size="2">e-Book</font></td>
<td width="12%" height="25">
<input type="radio" name="media" value="eBook:15.00:1"></td>
<td width="30%">$15.00</td>
</tr>
<tr>
<td width="20%" align="right"><font size="2">
CD&nbsp;</font></td>
<td width="12%" height="25">
<input type="radio" name="media" value="CD:15.00:2"></td>

<td width="30%">$15.00</td>

</tr>
<tr>
<td width="32%">&nbsp;</td>
<td width="55%" colspan="3">&nbsp;</td>
</tr>
<tr>

<td width="66%" colspan="3" align="right"><font size="2"> Handling Charge Per Order
(except e-Books)</font></td>
<td width="31%" valign="bottom" align="center">$4.50</td>

</tr>

</table>

</div>
</div>


<p align="center">
<font color="#FF0000" face="Dauphin" size="5">
<input type="submit" value="Buy Now" name="Bbuynow" style="font-family: Comic Sans MS; color: #FF0000; font-weight: bold" tabindex="8"><input type="reset" value="Reset Form" name="Breset" style="font-family: Comic Sans MS; color: #FF0000; font-weight: bold" tabindex="8"></p>
<p align="center">
&nbsp;</p>
<p align="center">
&nbsp;</p>
</form>
<p align="center">&nbsp;</p>

<center>
<p><img src="rwb_line.gif" width="540" height="8">
</p>
</center>

</body>
</html>