Simple JScript Form Problem

Discussion in 'OT Technology' started by doggfather, Apr 2, 2006.

  1. doggfather

    doggfather New Member

    Joined:
    Aug 6, 2005
    Messages:
    224
    Likes Received:
    0
    <script language="javascript">
    function superman(){
    document.write("<select name='superman'>");
    document.write("<option>kryptonite</option>");
    document.write("<option>supergirl</option>");
    document.write("</select>");
    }
    function batman(){
    document.write("<select name='batman'>");
    document.write("<option>batmobile</option>");
    document.write("<option>robin</option>");
    document.write("</select>");
    }
    </script>
    <form name="cool">
    <select name="hero">
    <option onClick="javascript:superman()">superman</option>
    <option onClick="javascript:batman()">batman</option>
    </select>

    I want it so whent hey select superman, the superman() goes on the bottom of the form on the CURRENT page

    It won't work right tho, can someone help me?
     
  2. dk01

    dk01 Awwwwww..... OT Supporter

    Joined:
    Mar 1, 2005
    Messages:
    3,178
    Likes Received:
    0
    Location:
    All up in your interwebsnet.
    I'd try something like this instead. I just threw it together but you might try something along these lines instead. Remember you can't write to the document after its been loaded. You can only hide/show information.

    <script language="javascript">
    function show(drop){
    var myindex = drop.selectedIndex;
    var myvalue = drop.options[myindex].value;
    document.getElementById(myvalue).style.display = "block";
    }
    </script>

    <form name="cool">

    <select name="hero" onchange="show(this.form.hero)">
    <option value="superman">superman</option>
    <option value="batman">batman</option>
    </select>

    <div id="superman" style="display:hidden;">
    <select name="superman">
    <option>kryptonite</option>
    <option>supergirl</option>
    </select>
    </div>

    <div id="batman" style="display:hidden;">
    <select name='batman'>
    <option>batmobile</option>
    <option>robin</option>
    </select>
    </div>

    </form>
     

Share This Page