Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Jun 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple code help needed - option buttons

    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

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I understood your post correctly, this may help.
    If not please post an example of what you are working on...

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    -----
    Last edited by adios; 06-29-2004 at 03:37 PM.

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Willy Duitt; 07-08-2004 at 09:24 PM.

  • #5
    New Coder
    Join Date
    Jun 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Option select help

    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

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    -----
    Last edited by adios; 06-29-2004 at 03:38 PM.

  • #7
    New Coder
    Join Date
    Jun 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    New Coder
    Join Date
    Jun 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    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)">
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    New Coder
    Join Date
    Jun 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #12
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)">

  • #13
    New Coder
    Join Date
    Jun 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #14
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Willy Duitt; 06-29-2004 at 01:11 AM.

  • #15
    New Coder
    Join Date
    Jun 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •