drop down lists and text box load --updon slcting a value from dropdown

Discussion in 'JavaScript' started by psrujan, Jun 19, 2007.

  1. #1
    hi ,

    I am working on developing a website. I am not a web programmer and know very little about javascript. I want to know whether the following is possible in javascript.

    I have 3 options (metric) in a drop down list , upon selection of one of the options the parameters related to them should be displayed below that which are themselves drop down list boxes.

    suppose if 3 options in the drop down list box are
    weightings
    sweep
    hpl

    and parameters related to them are
    weightings -- memory(dropdown),nodes(dropdown),NICs(dropdown).
    sweep----nx(textbox),ny(textbox),bandwidth(dropdown)
    hpl----- card(dropdown),value(text)

    when i select of of the options and only the parameters related to them should be displayed on the page .

    also if not on the same page , a pop is fine where i can enter these values and click submit and comeback to the old page.

    I dont know whether this is possible in javascript, if no please suggest me with what other languages this can be done.

    I grealty appreciate your help.

    Thank you
    PSKR
     
    psrujan, Jun 19, 2007 IP
  2. krakjoe

    krakjoe Well-Known Member

    Messages:
    1,795
    Likes Received:
    141
    Best Answers:
    0
    Trophy Points:
    135
    #2
    I'm not sure I get what you wanna do .... I hope so else I just wasted the last 10 minutes of my life !!

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script language="javascript">
    function DrawForm( )
    {
    	var FormArea = document.getElementById( 'FormArea' ) ;
    	
    	switch( document.theForm.ActionSelect.selectedIndex )
    	{
    		case 1 :
    			//memory(dropdown),nodes(dropdown),NICs(dropdown).
    			FormArea.innerHTML = 	'Memory : <select name="memory">'+
    									'<option>First Memory</option>'+
    									'<option>Second Memory</option>'+
    									'</select><br />'+
    									'Nodes : <select name="nodes">'+
    									'<option>First Nodes</option>'+
    									'<option>Second Nodes</option>'+
    									'</select><br />'+
    									'NICS : <select name="nics">'+
    									'<option>First NICS</option>'+
    									'<option>Second NICS</option>'+
    									'</select><br />'+
    									'<input type="submit" value="Submit" />';		
    		break;
    		
    		case 2 :
    			//nx(textbox),ny(textbox),bandwidth(dropdown)
    			FormArea.innerHTML = 	'NX : <textarea name="nx" rows=5 cols=15></textarea><br />'+
    									'NY : <textarea name="ny" rows=5 cols=15></textarea><br />'+
    									'Bandwidth : <select name="bandwidth">'+
    									'<option>First BW</option>'+
    									'<option>Second BW<</option>'+
    									'</select><br />'+
    									'<input type="submit" value="Submit" />';
    		break;
    		
    		case 3 :
    			//card(dropdown),value(text)
    			FormArea.innerHTML = 	'Card : <select name="card">'+
    									'<option>First Card</option>'+
    									'<option>Second Card<</option>'+
    									'</select><br />'+
    									'Value : <input type="text" name="value"><br />'+
    									'<input type="submit" value="Submit" />';
    		break;
    		
    		default :
    			FormArea.innerHTML = '';
    	}
    }
    </script>
    </head>
    
    <body>
    <div id="theMessage"></div>
    <form action="" method="post" name="theForm">
    	<select name="ActionSelect" onchange="DrawForm()">
    		<option value="-1">Please choose an option</option>
    		<option value="1">weightings</option>
    		<option value="2">sweep</option>
    		<option value="3">hpl</option>
    	</select>
    <div id="FormArea"></div>	
    </form>
    </body>
    </html>
    
    HTML:
     
    krakjoe, Jun 21, 2007 IP
  3. gaya3

    gaya3 Peon

    Messages:
    1
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    hi Joe,

    sorry...didnt notice

    i saw ur reply above....

    i tried using it for my requirement too...

    mine is nothing big, but to populate a dropdownlist with respect to a selection in the previous drop down list.

    i used exactly the same coding with little editing....

    i have another doubt,

    wats that"FormArea" inside the javascript is for.....


    eagerly waiting for ur reply...


    thanks in advance...
     
    gaya3, Feb 12, 2008 IP
    toniya likes this.