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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts

    certain choice in select box generates new form?

    I have a form with a select box as the first field:

    _____________
    |Please choose:
    | choice 1
    | choice 2
    | choice 3
    ----------------

    Choice 1 and 2 use the fields below (which are displayed by default)

    name |__________|

    address |__________|

    email |__________|

    ----

    Now, suppose I wanted choice 3 to generate:

    home phone |__________|

    mobile phone |__________|

    fax |__________|

    In other words, the name, address and email fields would disappear and be replaced with home phone, mobile phone and fax should choice 3 be selected. I've used appendchild to generate one text field but nothing this elaborate (completely replacing existing content/fields). Does this make sense...can it be done?

    Ashley

  • #2
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Hello Ashley,

    Somthing like this suit your needs?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function whichForm()
    {
    	var c=document.forms[0].choice.options[document.forms[0].choice.selectedIndex].value;
    	if(c==2)
    	{
    		var str='Home Phone: <input type="text" id="hphn">'+
    		'Mobile Phone: <input type="text" id="mphn">'+
    		'Fax:<input type="text" id="fax">';
    		document.getElementById('opt').innerHTML=str;
    	}
    }
    </script>
    <body>
    <form>
    	<select id="choice" onchange="whichForm()">
    		<option value="0">Choice 1</option>
    		<option value="1">Choice 2</option>
    		<option value="2">Choice 3</option>
    	</select>
    	<div id="opt">
    		Name: <input type="text" id="fname">
    		Address: <input type="text" id="adrs">
    		eMail:<input type="text" id="mail">
    	</div>
    </form>
    </body>
    </html>
    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure does but if you attempt to reselect choices 1 or 2, the fields do not revert.

    Also, do you think I will run into problems if both have a significant amount of additional fields/radios/select boxes, etc.?

    Ash

  • #4
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Shouldn't really run into any problems but be careful of the syntax when putting HTML in your JS it can be a little hairy if you've never done it before.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function whichForm()
    {
    	var c=document.forms[0].choice.options[document.forms[0].choice.selectedIndex].value;
    	if(c==2)
    	{
    		var str='Home Phone: <input type="text" id="hphn">'+
    		'Mobile Phone: <input type="text" id="mphn">'+
    		'Fax:<input type="text" id="fax">';
    		document.getElementById('opt').innerHTML=str;
    	}
    	else
    	{
    		str='Name: <input type="text" id="fname">'+
    		'Address: <input type="text" id="adrs">'+
    		'eMail:<input type="text" id="mail">';
    		document.getElementById('opt').innerHTML=str;	
    	}
    }
    </script>
    <body>
    <form>
    	<select id="choice" onchange="whichForm()">
    		<option value="0">Choice 1</option>
    		<option value="1">Choice 2</option>
    		<option value="2">Choice 3</option>
    	</select>
    	<div id="opt">
    		Name: <input type="text" id="fname">
    		Address: <input type="text" id="adrs">
    		eMail:<input type="text" id="mail">
    	</div>
    </form>
    </body>
    </html>

    Basscyst
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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