HI all,

I am trying adjust the form below to add it a dynamic dropdown box (I want to replace the radio buttons)


Code:
<head>
<style type="text/css">
<!--
div#rev {
display:block;
}
div#tra {
display:none;
}
p {height:20px;width:400px;margin:3px;}
p span.label{float:left;}
p span.label1{float:right;}
p input{float:right;width:150px}
body {
	background-color: #FFFFFF;
}
.style3 {color: #FF9900; font-weight: bold; }
.style5 {color: #000000; font-size: 20px;}
visibility:hidden

-->
</style>
<script type="text/javascript">
function change(id){
   if (id == "rev") {
         document.getElementById("rev").style.display = "block";
         document.getElementById("tra").style.display = "none";
      }
   else {
         document.getElementById("tra").style.display = "block";
         document.getElementById("rev").style.display = "none";
      }
}

function checkForm(frm){
	if(frm.id=="Frev"){
		var msg="";
		if(!frm.full.value){msg += "Full Account Number is required\n";}
		if(!frm.rep.value){msg += "Your Rep number is required\n";}
		if(!frm.branch.value){msg += "Branch location is required\n";}
		if(!frm.work.value){msg += "Workorder number is required\n";}
		if(!frm.errors.value){msg += "Description of error is required\n";}

		var action=frm.action+" "+frm.full.value;
		frm.action = action;

		if(msg !=""){
			alert(msg);
			return false;
		}
		// ADDED
		else {
			window.location="thankyou.html";
			return true;
		}
	}

	else if(frm.id=="Ftra"){
		var msg="";
		if(!frm.full.value){msg += "- Full account is required\n";}
		if(!frm.branch.value){msg += "- Branch name is required\n";}
		if(!frm.status.value){msg += "- Current status is required\n";}
		if(!frm.newstatus.value){msg += "- New status is required\n";}
		if(!frm.rep.value){msg += "- Your rep number is required\n";}
		if(!frm.reason.value){msg += "- A reason for this request is required\n";}

		var action=frm.action+" "+frm.full.value;
		frm.action = action;


		if(msg !=""){
			alert(msg);
			return false;
		}
		// ADDED
		else {
			window.location="thankyou.html";
			return true;
		}
	}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div style="width:500px;">
<p class="style5"><img src="http://itportal/sites/itsc/Site/cbswo.jpg" alt="ccbanner" width="500" height="45"></p>
<br />

<input type="radio" name="card" id="r" value="rev" onClick="change(this.value)"><label for="r">CBS Broken Workorders</label>
<input type="radio" name="card" id="t" value="tra" onClick="change(this.value)"><label for="t">CBS Account Status Changes</label>

<div id="rev" onload="rep.focus()">
<form id="Frev" action="mailto:BlahBlah?subject=CBS - Broken Workorder - " enctype="text/plain" method="post" onSubmit="return checkForm(this)">
            <p>Prior to submitting your request, please provide the information requested (below):</p>
            <b><span class="style3">NOTE</span></b>: All fields are mandatory<br /><br />

            1. Do not try to post any work orders on the account that has a broken workorder. <br />
      		2. Workorder changes should not be attempted if there is a broken workorder on an account. <br />
			3. Do not try and fix a broken workorder yourself.(submit this form to fix it) <br />
            <br />

 <p><span class="label">Full Account Number:</span><input name="Full account number" type="text" maxlength="13" id="full"></p>
 <p><span class="label">Rep Number:</span><input name="Rep number" type="text" maxlength="4" id="rep"></p>
 <p><span class="label">Branch(cgy,kel,vic, etc, etc):</span><input name="CBS Branch name: " type="text" maxlength="3" id="branch"></p>
 <p><span class="label">Work Order Number:</span><input name="Work Order number" type="text" maxlength="9" id="work"></p>
 <p><span class="label">Steps taken when error occurs:</span><textarea name="Steps taken when error occurs"  rows="4" cols="48" type="text" id="errors"></textarea></p>
    <span class="label"><input type="submit" value="Submit Request"></span><span class="label"><input type="reset" value="Reset Form"></span>
</form>
</div>

<div id="tra">
<form id="Ftra" action="mailto:BlahBlah?subject=CBS - Account status change - " enctype="text/plain" method="post" onSubmit="return checkForm(this)">
<p>Prior to submitting your request, please provide the information requested (below):</p>
<b><span class="style3">NOTE</span></b>: All fields are mandatory<br /><br />
  1. ANY status changes on an account with an balance in the 30/60/90 <u>could</u> break the account for up to 3 days. <br />
  2. Put a note on the CBS account that you have requested an account status change. </p>

<p><span class="label">Account Number:</span><input name="Account Number" type="text" maxlength="13" id="full"></p>
<p><span class="label">Branch:</span><input name="Branch" type="text" maxlength="3" id="branch"></p>
<p><span class="label">Current Status:</span><input name="Current Status" type="text" maxlength="2" id="status"></p>
<p><span class="label">New Status:</span><input name="New Status" type="text" maxlength="2" id="newstatus"></p>
<p><span class="label">Rep Number</span><input name="Rep Number" type="text" maxlength="4" id="rep"></p>
<p><span class="label">Reason for Change:</span><textarea name="reason for change"  rows="4" cols="48" type="text" id="reason"></textarea></p>
<span class="label"><input type="submit" value="Submit Request"></span><span class="label"><input type="reset" value="Reset Form"></span>
</form>
</div>
<img src="ccfooter.jpg" alt="ccfooter" width="500" height="45">
</div>
</body>


This is what i would like to replace the radio buttons with, so that when someone selects an option it will populate the questions below to be filled out. Does anyone have any sugesstions? I know zip about javascript and a bit over my head here.




Code:
<!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=utf-8" />
<title>IT Enterprise Telephony Request Forms</title>
<style type="text/css">
<!--
.style2 {
	color: #3366FF;
	font-weight: bold;
}
-->
</style>
</head>
<script>
function setOptions(chosen) {
var selbox = document.myform.opttwo;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
  selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
}

function change(id){
   if (id == "rev") {
         document.getElementById("rev").style.display = "block";
         document.getElementById("tra").style.display = "none";
      }
   else {
         document.getElementById("tra").style.display = "block";
         document.getElementById("rev").style.display = "none";
      }
}
</script>
<body>
This is a Test, This form will be the auto cut form for PBX with this form we are looking to make life a little easier for everyone. Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah  Blah  Blah Blah  Blah<br /> <br />
Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah  Blah  Blah Blah  Blah<br /> <br />
Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah  Blah  Blah Blah  Blah<br /> <br />
Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah Blah  Blah  Blah  Blah Blah  Blah<br /> <br />
Prior to submitting your request, please provide the information requested (below): <br />
<span class="style2">NOTE: All fields are mandatory</span>
<form name="myform">
  <div align="justify">Please make your selection:   
    <select name="optone" size="1" onchange="setOptions(document.myform.optone.options [document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="1" id="r" value="rev" onClick="change(this.value)"><label for="r">NEC login Request Form</option>
<option value="2" id="t" value="tra" onClick="change(this.value)"><label for="t">ISSAC/Cisco Login Request Form</option>