Dropdown menu help

Discussion in 'HTML & Website Design' started by fiz, Jul 22, 2008.

  1. #1
    I am new to HTML and I need help regarding my school project.

    I've added values of "1-10" for the "Number of Data" menu. Now, I'd like an input box to appear below the menu. Let say I chose 5 for the "Number of data", 5 input boxes will appear below it. (You get what I'm trying to say? I'm new to this, so I'm not sure what is the right term :D)

    Thanks.

    <html>
    <head>
    <title>Our FYP Project</title>
    </head>
    <body>
    <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
    <b>Type of Graph</b><br>
    <select name="mydropdown">
    <option value="Line Graph">Line Graph</option>
    <option value="Bar Graph">Bar Graph</option>
    <option value="Pie Graph">Pie Graph</option>
    </select>
    <br>
    <br>
    <b>Number of Data Input</b><br>
    <select name="mydropdown">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select>
    <br>
    <input type="text" name="firstname">
    <input type="text" name="lastname">
    </form>
    <br><br>
    <input type="submit" value="Generate Graph">
    </form>
    </body>
    </html>
    Code (markup):
     
    fiz, Jul 22, 2008 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Here's my lame attempt :)
    
    <html>
    <head>
    <script type="text/javascript">
    function ShowInputs()
    {
    	var idx=document.form1.menu1.selectedIndex;
    	var i=0;
    	for (i=0;i<=idx;i++)
    	{
    		document.write('<input type="text" /><br />');
    	}
    }
    </script>
    </head>
    <body>
    <form name="form1">
      <select name="menu1" onChange="ShowInputs()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </form>
    </body>
    </html>
    
    Code (markup):
     
    Cash Nebula, Jul 22, 2008 IP
  3. fiz

    fiz Peon

    Messages:
    112
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Brilliant mate. Thanks for these. But do you know how I can add it to the original layout? (meaning it'll still appear without moving to another page)

    Thanks alot mate.
     
    fiz, Jul 23, 2008 IP
  4. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Not sure. I guess you could use a frame, or change the visibility of the inputs.

    Cheers! :)
     
    Cash Nebula, Jul 23, 2008 IP