This should help you:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dynamic HTML Form</title>
<script language="JavaScript">
function changeForm(form) {
var oSel = eval("form.oFormType");
var userSelection = oSel.options[oSel.selectedIndex].value;
switch (userSelection) {
case "firstname" :
document.all.firstnameLabel.style.display = "block";
form.firstname.style.display = "block";
document.all.lastnameLabel.style.display = "none"
form.lastname.style.display = "none"
form.firstname.focus();
break;
case "lastname" :
document.all.lastnameLabel.style.display = "block";
form.lastname.style.display = "block";
document.all.firstnameLabel.style.display = "none"
form.firstname.style.display = "none"
form.lastname.focus();
break;
default :
break;
}
return;
}
</script>
</head>
<body>
<form id="dhtmlForm" action="postPage.cfm" method="post">
<table id="formTable" cellpadding="0" cellspacing="0" border="0"
>
<tr id="formTypeRow">
<td id="formTypeCell">
Form Type: <select size="1" id="oFormType"
onchange="changeForm(this.form);">
<option name="default" value="default">Form Type
<option name="firstname" value="firstname">First Name
<option name="lastname" value="lastname">Last Name
</select>
</td>
</tr>
<tr id="firstnameRow">
<td id="firstnameCell">
<div id="firstnameLabel" style="display:none;">First Name:</div><
input
name="firstname" id="firstname" type="text" width="30"
style="display:none;">
</td>
</tr>
<tr id="lastnameRow">
<td id="lastnameCell">
<div id="lastnameLabel" style="display:none;">Last Name:</div><in
put
name="lastname" id="lastname" type="text" width="30" style="dis
play:none;">
</td>
</tr>
</table>
</form>
</body>
</html>
Cut and paste the code above. You can see how it works and then modify it
to
fit your specific needs.
Greg Alton
CFDev
[EMAIL PROTECTED]
http://www.cfdev.com
----- Original Message -----
From: "Martin Sutton" <[EMAIL PROTECTED]>
To: "CF-Talk" <[EMAIL PROTECTED]>
Sent: Monday, February 18, 2002 11:44 AM
Subject: OT: JavaScript - Hiding Rows Based on <select>
> Dear all,
>
> I have a select which allows the user to choose the type of report they
want
> to see. Each report may have different criteria, for example, an
"age/sex"
> report will need different parameters to an "orders" report. I wish to
have
> JavaScript hide and display form elements as necessary in order to ensu
re
> the query has the correct variables and also to have an un-cluttered fo
rm.
>
> It has been suggested I use an onChange() with
rowObj.style.display="none".
> I am unsure how to implement this however. I am a complete novice at J
S.
> Anyone have any pointers or a sample?
>
> I'd appreciate any help very much.
>
> Regards,
>
> Martin.
>
______________________________________________________________________
Get Your Own Dedicated Windows 2000 Server
PIII 800 / 256 MB RAM / 40 GB HD / 20 GB MO/XFER
Instant Activation � $99/Month � Free Setup
http://www.pennyhost.com/redirect.cfm?adcode=coldfusionb
FAQ: http://www.thenetprofits.co.uk/coldfusion/faq
Archives: http://www.mail-archive.com/[email protected]/
Unsubscribe: http://www.houseoffusion.com/index.cfm?sidebar=lists
