...

View Full Version : Simple code help needed - option buttons



Deidre
06-26-2004, 07:16 PM
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
06-26-2004, 08:36 PM
If I understood your post correctly, this (http://javascriptkit.com/script/script2/triplecombo.shtml) may help.
If not please post an example of what you are working on...

adios
06-26-2004, 09:39 PM
-----

Willy Duitt
06-26-2004, 09:46 PM
BTW: Welcome back adios. :D
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. :rolleyes:

Deidre
06-27-2004, 06:10 AM
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
06-27-2004, 09:28 PM
-----

Deidre
06-27-2004, 10:25 PM
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
06-28-2004, 04:23 AM
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
06-28-2004, 04:50 AM
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
06-28-2004, 06:07 AM
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
06-28-2004, 05:03 PM
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
06-28-2004, 05:22 PM
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
06-29-2004, 01:48 AM
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
06-29-2004, 02:00 AM
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
06-29-2004, 04:10 AM
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>

adios
06-29-2004, 04:59 AM
-----

glenngv
06-29-2004, 05:32 AM
Deidre, you forgot the opening <script> tag. And the function is best placed in the <head>.



<head>
<script type="text/javascript">
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>
</head>

Deidre
06-29-2004, 07:15 AM
Thanks for the help, Glenn. Actually <script> was in there but I didn't have the "type" parameter. I was having problems with FrontPage, so I don't know what fixed it, the "type" (my default type is set to JavaScript) or this:

if (f.media[i].checked) {
mediaValue=f.media[i].value;

Notice the "f" before ".media[i].value;" The "f" was left out of the code sample. Maybe ".media" and "f.media" mean the same thing in Java, but I stuck it in there and now most of it works. I'm getting the right price and the right screen comes up, no error messages. Somehow, though, the value of product, "Vol1", is repeated twice with an "e" stuck between them. My unskilled check of the logic can't see how the product name is repeated, but maybe the escape is producing the "e"?

Geez, this is too much like work!

glenngv
06-29-2004, 07:33 AM
You need to put the f in the .media[i].value, I didn't notice it wasn't there.

I don't know how the product is repeated twice with an "e". The escaped values of the colon is %3A and should be read by cfm as colon. Can you post the output?

PS. I suggest you use a different html editor. Don't use frontpage as it mangles your code. :mad:

adios
06-29-2004, 04:36 PM
------

Deidre
06-29-2004, 04:44 PM
Glenn - here is what prints out on my receipt:

Vol4Printed BookVol4

Here is the code for the product (Vol4) option:

<select size="4" name="product" tabindex="1" style="font-family: Arial; font-size: 12pt; font-weight: bold" id="product">

<option value="Vol4">Volume 4</option>

Here is the code for the media type (Printed Book:19.50:2). The price and units are contained within the media type:

<input type="radio" name="media" value="Printed Book:19.50:2"></td>

Here is the action code for the function that concatenates the two:

f.action += "?productpr=" + escape(f.product.options[f.product.selectedIndex].value + mediaValue);


I don't need to add any colons since they are already in "media" and Vol4 is just part of the entire product name. What does += mean?

Thanks for your help. Breaking it up and explaining it sometimes helps me figure out my own mistakes and, if not, it still helps me with understanding it better.

Willy Duitt
06-29-2004, 05:05 PM
What does += mean?

As I previously noted. I do not think Glenn is around at this time of day. And although this does not seem to be a pressing question, it is easy enough to answer. :)

+= adds to the value....

In your case it is adding to your form action of:
action="http://ww4.aitsafe.com/cf/add.cfm"

And returns:
action="http://ww4.aitsafe.com/cf/add.cfm?productpr=Vol2%3APrintedBook%3A19.50%3A2
"

.....Willy

Deidre
06-29-2004, 05:22 PM
Hi Willy. JS is like Spanish - verbs and nouns don't seem to be in the right place to a VB programmer. :-)

Yes, that is indeed what that line of code produces. Since that's not what my ecom server is sending back to me, perhaps the %3A instead of a colon is offending it. Can I prevent the translation of the colons to %3A? Maybe putting slashes before them?

Willy Duitt
06-29-2004, 05:46 PM
When it comes back you need to unescape the location.href or location.search in order to convert back from hexidecimal.

A brief example usage of unescape():


<script>
var url = unescape('http://ww4.aitsafe.com/cf/add.cfm?productpr=Vol2%3APrintedBook%3A19.50%3A2');
alert(url)
</script>

.....Willy

Deidre
06-29-2004, 07:03 PM
I think the problem lies with the ecom server. I tried a simplified form that didn't use the colons for submittal and I got the same duplicate product name.

Thanks for all your help - next stop Mal's ecommerce.

Deidre



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum