...

View Full Version : certain choice in select box generates new form?



AshleyQuick
07-10-2004, 04:23 PM
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

Basscyst
07-10-2004, 05:22 PM
Hello Ashley,

Somthing like this suit your needs?



<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

AshleyQuick
07-10-2004, 07:35 PM
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

Basscyst
07-10-2004, 08:13 PM
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.



<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum