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.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Passing Multiple Value with onChange

    I am trying to create a very simple page that uses a drop down menu to display an image and a text description. Any help would be greatly appreciated!

    <html>
    <head>
    <title>Olde World Antiques</title>
    <script language="javascript">
    <!-- Hide from old browsers
    var banners = new
    Array("../images/banner1.gif", "../images/banner2.gif", "../images/banner3.gif")
    var bnrCntr = 0
    function bancycle() {
    bnrCntr = bnrCntr + 1
    if (bnrCntr == 3) {
    bnrCntr = 0
    }
    document.Banner.src = banners[bnrCntr]
    setTimeout("bancycle()", 3000)
    }
    function previewPic(sel) {

    mylabel = new Array("../images/dresser.jpg", "../images/lg_dresser.jpg", "../images/bowl.jpg");
    myvalue = new Array("Dresser", "Large Dresser", "Bowl");

    document.previewpic.src = mylabel[sel.selectedIndex];
    document.op1.value = "";
    document.op1.value = myvalue[sel.selectedIndex];

    }
    //-->
    </script>
    </head>
    <body onLoad="setTimeout('bancycle()', 3000)">
    <img src="../images/banner1.gif" name="Banner" width="750" height="75 ">
    <center>
    <h2>Welcome to Olde World Antiques! To view some of our current High Value Items, select from the following...</h2>
    <table>
    <form>
    <tr>
    <td align="center">
    <select name=items size=1 onChange="previewPic(this)">
    <option myvalue="Dresser" mylabel="../images/dresser.jpg" selected >Dresser
    <option myvalue="Large Dresser" mylabel="../images/lg_dresser.jpg">Large Dresser
    <option myvalue="Bowl" mylabel="../images/bowl.jpg">Bowl
    </select>
    </td>
    </tr>
    <tr>
    <td align="center">
    <img name="previewpic" src="../images/dresser.jpg" width=100 height=125 border=0>
    </td>
    </tr>
    <tr>
    <td>
    <input type="text" name="op1" value="Dresser">
    </td>
    </tr>
    </form>
    </table>
    </center>
    </body>
    </html>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    You didn't describe your problem.
    But here's the fix, anyway.
    Code:
    function previewPic(sel) {
    var idx = sel.selectedIndex;
    document.images['previewpic'].src = sel.options[idx].value;
    document.myform.op1.value = sel.options[idx].text;
    }
    html:
    <form name="myform">
    <select name="items" size="1" onchange="previewPic(this)">
    <option value="../images/dresser.jpg" selected>Dresser</option>
    <option value="../images/lg_dresser.jpg">Large Dresser</option>
    <option value="../images/bowl.jpg">Bowl</option>
    </select>
    ...
    <img name="previewpic" src="../images/dresser.jpg" width="100" height="125" border="0" />
    ...
    <input type="text" name="op1" value="Dresser" />
    ...
    </form>

  • #3
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Glenn. After I posted, I realized that I didn't describe the problem.

    It's nice to have a forum like this for new programmers!!


  •  

    Posting Permissions

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