PDA

View Full Version : Pulldown Menu Show/Hide



tqla
05-13-2008, 02:32 AM
Hello. I have a pulldown menu with 4 selections. I need a small text rield to appear when someone selects "Our Representative" or "Other" so that they can fill in the rep ID or describe other. Can someone please show me the code for this. Thanks



<select name="Hear" id="Hear" >
<option value=""
<?php if (!$_POST || $_POST['Hear'] == '') { ?>
selected="selected"
<?php } ?>
>- Please Select -</option>
<option value="Our Representative"
<?php
if (isset($missing) && $_POST['Hear'] == 'Our Representative') { ?>
selected="selected"
<?php } ?>
>Our Representative</option>
<option value="Voicemail"
<?php
if (isset($missing) && $_POST['Hear'] == 'Voicemail') { ?>
selected="selected"
<?php } ?>
>Voicemail</option>
<option value="Email"
<?php
if (isset($missing) && $_POST['Hear'] == 'Email') { ?>
selected="selected"
<?php } ?>
>Email</option>
<option value="Search Engine"
<?php
if (isset($missing) && $_POST['Hear'] == 'Search Engine') { ?>
selected="selected"
<?php } ?>
>Search Engine</option>
<option value="Other"
<?php
if (isset($missing) && $_POST['Hear'] == 'Other') { ?>
selected="selected"
<?php } ?>
>Other</option>
</select>

rangana
05-13-2008, 02:51 AM
I've had answer this for your in CF (http://codingforums.com/showpost.php?p=687798&postcount=2). Seemed you miss to visit your thread ;)

tqla
05-13-2008, 02:56 AM
Thanks rangana! Yes I missed that. I'll try it now. Thanks again.

tqla
05-13-2008, 03:16 AM
It works fine. Thanks.

I changed it so that text fields only show up on "Our Representative" and "Other".

Is there a way to make the text field disappear again is someone chooses "Email" of "Search Engine" after they already choose "other"? Right now if you choose Other or Rep the box show up, but if you change your mind and choos email the boxe for Rep or Other are still there.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{margin:0;padding:0;}
#wrap{width:500px;padding:10px;border:3px double #222;margin:20px auto;text-align:left;}
</style>
<script type="text/javascript">
function reset(){
var obj=document.getElementsByTagName('input');
for(var i=0;i<obj.length;i++)
{obj[i].style.display='none';}}
window.onload=function()
{
var labl=document.getElementById('labl');
var slect=document.getElementById('myselect');
var ad=document.getElementById('Our Representative');
var rep=document.getElementById('Voicemail');
var friend=document.getElementById('Email');
var other=document.getElementById('Other');
labl.style.display='none';
reset();
slect.onchange=function()
{
switch(slect.value)
{
case 'Our Representative':
reset();
labl.style.display='';
labl.innerHTML='Rep ID#: ';
ad.style.display='';
break;
case 'Other':
reset();
labl.style.display='';
labl.innerHTML='Describe Other: ';
other.style.display='';
break;
}
}
}
</script>
</head>
<body>
<div id="wrap">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><select id="myselect">
<option>Select...</option>
<option value="Our Representative">Our Representative</option>
<option value="Voicemail">Voicemail</option>
<option value="Email">Email</option>
<option value="Search Engine">Search Engine</option>
<option value="Other">Other</option>
</select></td>
<td><label id="labl">Ad: </label><input type="text" id="Our Representative">
<input type="text" id="Voicemail">
<input type="text" id="Email">
<input type="text" id="Search Engine">
<input type="text" id="Other"></td>
</tr>
</table>
</div>
</body>
</html>

rangana
05-13-2008, 03:57 AM
Just add this code right after the last break; ;)


default:
reset();

tqla
05-13-2008, 04:11 AM
That worked. Thanks!

Rangana, can you please help me with one more problem.

Here is my complete script. the problem is the JavaScript makes my other fields not show up. When I remove the JS code they show up so it's gotta be something in the JS script.



<?php session_start(); ?>
<script type="text/javascript">
function reset(){
var obj=document.getElementsByTagName('input');
for(var i=0;i<obj.length;i++)
{obj[i].style.display='none';}}
window.onload=function()
{
var labl=document.getElementById('labl');
var slect=document.getElementById('myselect');
var ad=document.getElementById('Our Representative');
var other=document.getElementById('Other');
labl.style.display='none';
reset();
slect.onchange=function()
{
switch(slect.value)
{
case 'Our Representative':
reset();
labl.style.display='';
labl.innerHTML='';
ad.style.display='';
break;
case 'Other':
reset();
labl.style.display='';
labl.innerHTML='';
other.style.display='';
break;
default:
reset();
}
}
}
</script>
<form name="mainForm" method="post" action="checkAll.php">
<DIV ID="headerbox">
<p><img src="../images/index_01.jpg" width="800" height="113"><img src="../images/index_02.jpg" width="800" height="112"><br>
</p>
</DIV>
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><?php
if($errors =='yes'){
echo $error_text;
}
?>
</td>
</tr>
<tr>
<td><h3>Registration Form </h3></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<DIV ID="formbox">
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><h3>Information</h3></td>
</tr>
<tr>
<td width="169">
* First Name:</td>
<td width="611"><input name="FirstName" type="text" class="small formfieldwidth2" id="txtFirstName5" value="<?php echo ($_POST['FirstName']) ?>" maxlength="100" /></td>
</tr>
<tr>
<td>* <span id="valLastName" style="color:Red;display:none;"></span>
Last Name:</td>
<td><input name="LastName" type="text" class="small formfieldwidth2" id="txtLastName5" value="<?php echo ($_POST['LastName']) ?>" maxlength="30" /></td>
</tr>
<tr>
<td> *
Job Title:
</td>
<td><input name="JobTitle" type="text" id="JobTitle" value="<?php echo ($_POST['JobTitle']) ?>" maxlength="100" /></td>
</tr>
<tr>
<td>*
Company:<br>
</td>
<td><input name="Company" type="text" class="small formfieldwidth2 hastip" id="txtCompany5" value="<?php echo ($_POST['Company']) ?>" maxlength="100" /> </td>
</tr>
<tr>
<td>*
Address 1:</td>
<td><input name="Address1" type="text" class="small formfieldwidth2" id="txtAddress14" value="<?php echo ($_POST['Address1']) ?>" maxlength="100" /></td>
</tr>
<tr>
<td>&nbsp;&nbsp;Address 2:</td>
<td><input name="Address2" type="text" class="small formfieldwidth2" id="txtAddress24" value="<?php echo ($_POST['Address2']) ?>" maxlength="100" /></td>
</tr>
<tr>
<td>*
City:</td>
<td><input name="City" type="text" class="small formfieldwidth2" id="txtCity4" value="<?php echo ($_POST['City']) ?>" maxlength="100" /></td>
</tr>
<tr>
<td>* State/Province:</td>
<td><input name="State" type="text" id="State" value="<?php echo ($_POST['State']) ?>" size="2" maxlength="2"> </td>
</tr>
<tr>
<td>*
ZIP/Postal Code:</td>
<td><input name="PostalCode" type="text" value="<?php echo ($_POST['PostalCode']) ?>" maxlength="100" /></td>
</tr>
<tr>
<td>*
Phone:</td>
<td><input name="Phone" type="text" id="txtPhone4" value="<?php echo ($_POST['Phone']) ?>" maxlength="100" />
Ext:
<input name="textfield" type="text" value="<?php echo ($_POST['Ext']) ?>" size="5"></td>
</tr>
<tr>
<td>* Email Address: </td>
<td><input name="Email" type="text" id="Email" value="<?php echo ($_POST['Email']) ?>" maxlength="100" />
(john.smith@company.com) </td>
</tr>
</table>
<table width="720" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="169">Decision making role: </td>
<td width="611"><select name="Decision" id="Decision" >
<option value=""
<?php if (!$_POST || $_POST['Decision'] == '') { ?>
selected="selected"
<?php } ?>
>Select...</option>
<option value="Decision Maker"
<?php
if (isset($missing) && $_POST['Decision'] == 'Decision Maker') { ?>
selected="selected"
<?php } ?>
>Decision Maker</option>
<option value="Recommender"
<?php
if (isset($missing) && $_POST['Decision'] == 'Recommender') { ?>
selected="selected"
<?php } ?>
>Recommender</option>
<option value="Influencer"
<?php
if (isset($missing) && $_POST['Decision'] == 'Influencer') { ?>
selected="selected"
<?php } ?>
>Influencer</option>
<option value="Evaluator"
<?php
if (isset($missing) && $_POST['Decision'] == 'Evaluator') { ?>
selected="selected"
<?php } ?>
>Evaluator</option>
</select></td>
</tr>
<tr>
<tr>
<td width="169">How did you hear about this event?</td>
<td width="611">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><select id="myselect">
<option>Select...</option>
<option value="Our Representative">Our Representative</option>
<option value="Voicemail">Voicemail</option>
<option value="Email">Email</option>
<option value="Search Engine">Search Engine</option>
<option value="Other">Other</option>
</select></td>
<td width="90%"><label id="labl">Ad: </label><input type="text" id="Our Representative" value="Input Rep ID#">
<input type="text" id="Other" value="Please explain"></td>
</tr>
</table>

</td>
</tr>
<tr>
<td colspan="2">&nbsp; </td>
</tr>
<tr>
<td colspan="2"> Who else do you think would benefit from attending this seminar? </td>
</tr>
<tr>
<td colspan="2">&nbsp; </td>
</tr>
<tr>
<td> First Name:</td>
<td><input name="RecFirstName" type="text" class="small formfieldwidth2" id="txtFirstName5" value="<?php echo ($_POST['RecFirstName']) ?>" maxlength="100" /></td>
</tr>
<tr>
<td><span id="valLastName" style="color:Red;display:none;"></span> Last Name:</td>
<td><input name="RecLastName" type="text" class="small formfieldwidth2" id="txtLastName5" value="<?php echo ($_POST['RecLastName']) ?>" maxlength="30" /></td>
</tr>
<tr>
<td>Company:<br>
</td>
<td><input name="RecCompany" type="text" class="small formfieldwidth2 hastip" id="txtCompany5" value="<?php echo ($_POST['RecCompany']) ?>" maxlength="100" />
</td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="RecPhone" type="text" id="txtPhone4" value="<?php echo ($_POST['RecPhone']) ?>" maxlength="100" /> Ext:
<input name="textfield2" type="text" value="<?php echo ($_POST['RecExt']) ?>" size="5"></td>
</tr>
<tr>
<td> Email Address: </td>
<td><input name="RecEmail" type="text" id="RecEmail" value="<?php echo ($_POST['RecEmail']) ?>" maxlength="100" />
(john.smith@company.com) </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<table width="720" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><input type="submit" name="Submit" value="Submit">
<input type="reset" name="Submit2" value="Reset"></td>
</tr>
</table> <br></td>
</tr>
</table>
</DIV>
<p>&nbsp;</p></td>
</tr>
</table>

<p>&nbsp;</p>
</form>

rangana
05-13-2008, 04:27 AM
It's because of this function:


function reset(){
var obj=document.getElementsByTagName('input');
for(var i=0;i<obj.length;i++)
{obj[i].style.display='none';}}


The fix is to change to this script instead:


function reset()
{
var labl=document.getElementById('labl');
var ad=document.getElementById('Our Representative');
var other=document.getElementById('Other');
labl.style.display='none';
ad.style.display='none';
other.style.display='none';
}
window.onload=function()
{
var labl=document.getElementById('labl');
var slect=document.getElementById('myselect');
var ad=document.getElementById('Our Representative');
var other=document.getElementById('Other');
slect.onchange=function()
{
switch(slect.value)
{
case 'Our Representative':
reset();
labl.style.display='';
labl.innerHTML='';
ad.style.display='';
break;
case 'Other':
reset();
labl.style.display='';
labl.innerHTML='';
other.style.display='';
break;
default:
}
}
reset();
}

tqla
05-13-2008, 05:10 AM
That's it! Awesome. Thanks rangana.

Kristen
06-19-2008, 04:34 PM
I tried a modified version of this code, and I am having one tiny problem: The text box is visible from the beginning, but it goes away when you click on a non-other response. Is there a way to make the text box hidden until 'other' is selected?


//Javascript Text//
<script type="text/javascript">
function reset()
{
var labl=document.getElementById('labl');
var other=document.getElementById('Title_Other');
labl.style.display='none';
other.style.display='none';
}
window.onload=function()
{
var labl=document.getElementById('labl');
var slect=document.getElementById('Title_Position');
var other=document.getElementById('Title_Other');
slect.onchange=function()
{
switch(slect.value)
{
case '15':
reset();
labl.style.display='';
labl.innerHTML='';
other.style.display='';
break;
default:
reset();
}
}
}
</script>

//HTML Text//
Title/Position
<SELECT NAME="Title_Position">
<OPTION SELECTED VALUE=""></OPTION>
<OPTION VALUE="1">President, VP, Other Executive</OPTION>
<OPTION VALUE="2">Pathologist, Other MD</OPTION>
<OPTION VALUE="3">Director, Assistant Director</OPTION>
<OPTION VALUE="4">Lab Manager, Lab Administrator</OPTION>
<OPTION VALUE="5">Med Tech, Chief Med Tech</OPTION>
<OPTION VALUE="6">Lab Supervisor</OPTION>
<OPTION VALUE="7">POCT, QA, Coordinator</OPTION>
<OPTION VALUE="8">Lab Technologist</OPTION>
<OPTION VALUE="9">Buyer, Purchasing Agent</OPTION>
<OPTION VALUE="10">Research or Development Scientist, Engineer</OPTION>
<OPTION VALUE="11">Manufacturing/ Operations</OPTION>
<OPTION VALUE="12">Marketing, Sales, Analysis</OPTION>
<OPTION VALUE="13">Clinical, Regulatory Affairs</OPTION>
<OPTION VALUE="14">Educator, Student</OPTION>
<OPTION VALUE="16">Consultant</OPTION>
<OPTION VALUE="17">Associate, Partner</OPTION>
<OPTION VALUE="18">Finance, Financial Analysis</OPTION>
<OPTION VALUE="15">Other</OPTION>
</SELECT>
<label id="labl"></label>
<input type="text" name="Title_Other" value="">

Also, I'd like to make a block of questions available only for certain responses. For example, if they are a student, I'd like to know their major and year, but if they were a president, I'd ask what kind of company they are in, etc. And of course, I would prefer for these questions to remain hidden unless these options were selected. Is there a way to do this without causing too many problems?

Thanks in advance!

rangana
06-20-2008, 12:15 AM
Because you were referring to an id when you have a name. The earlier is better.

Here's the modified version:


<script type="text/javascript">
window.onload=function()
{
var labl=document.getElementById('labl');
var slect=document.getElementById('Title_Position');
var other=document.getElementById('Title_Other');
labl.style.display='none';
other.style.display='none';
slect.onchange=function()
{
switch(this.value)
{
case '15':
labl.style.display='';
labl.innerHTML='';
other.style.display='';
break;
}
}
}
</script>

//HTML Text//
Title/Position
<SELECT id="Title_Position">
<OPTION SELECTED VALUE=""></OPTION>
<OPTION VALUE="1">President, VP, Other Executive</OPTION>
<OPTION VALUE="2">Pathologist, Other MD</OPTION>
<OPTION VALUE="3">Director, Assistant Director</OPTION>
<OPTION VALUE="4">Lab Manager, Lab Administrator</OPTION>
<OPTION VALUE="5">Med Tech, Chief Med Tech</OPTION>
<OPTION VALUE="6">Lab Supervisor</OPTION>
<OPTION VALUE="7">POCT, QA, Coordinator</OPTION>
<OPTION VALUE="8">Lab Technologist</OPTION>
<OPTION VALUE="9">Buyer, Purchasing Agent</OPTION>
<OPTION VALUE="10">Research or Development Scientist, Engineer</OPTION>
<OPTION VALUE="11">Manufacturing/ Operations</OPTION>
<OPTION VALUE="12">Marketing, Sales, Analysis</OPTION>
<OPTION VALUE="13">Clinical, Regulatory Affairs</OPTION>
<OPTION VALUE="14">Educator, Student</OPTION>
<OPTION VALUE="16">Consultant</OPTION>
<OPTION VALUE="17">Associate, Partner</OPTION>
<OPTION VALUE="18">Finance, Financial Analysis</OPTION>
<OPTION VALUE="15">Other</OPTION>
</SELECT>
<label id="labl"></label>
<input type="text" id="Title_Other" value="">


For you questions. Yes there is a way. Show us your attempt, and we'll help you put them into the proper places.

Kristen
07-01-2008, 02:15 PM
When I put two of these questions on the same page, only the second one works correctly. When they're on separate pages, they both work. Is there something wrong with my code when I combine them?


<script type="text/javascript">
function reset()
{
var labl=document.getElementById('labl');
var other=document.getElementById('Test_Other');
labl.style.display='none';
other.style.display='none';
}

window.onload=function()
{
var labl=document.getElementById('labl');
var slect=document.getElementById('Test_Position');

var other=document.getElementById('Test_Other');
labl.style.display='none';
reset();
slect.onchange=function()
{
switch(slect.value)
{

case '15':
reset();
labl.style.display='';
labl.innerHTML='';
other.style.display='';
break;
default:
reset();
}
}
}

function reset()
{
var labl=document.getElementById('labl');
var other=document.getElementById('Test_Other1');
labl.style.display='none';
other.style.display='none';
}

window.onload=function()
{
var labl=document.getElementById('labl');
var slect=document.getElementById('Test_Type');

var other=document.getElementById('Test_Other1');
labl.style.display='none';
reset();
slect.onchange=function()
{
switch(slect.value)
{

case '13':
reset();
labl.style.display='';
labl.innerHTML='';
other.style.display='';
break;
default:
reset();
}
}
}
</script>

<SELECT NAME="Test_Position">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">President, VP, Other Executive</option>
<option value="2">Pathologist, Other MD</option>
<option value="3">Director, Assistant Director</option>
<option value="4">Lab Manager, Lab Administrator</option>
<option value="5">Med Tech, Chief Med Tech</option>
<option value="6">Lab Supervisor</option>
<option value="7">POCT, QA, Coordinator</option>
<option value="8">Lab Technologist</option>
<option value="9">Buyer, Purchasing Agent</option>
<option value="10">Research or Development Scientist, Engineer</option>
<option value="11">Manufacturing/ Operations</option>
<option value="12">Marketing, Sales, Analysis</option>
<option value="13">Clinical, Regulatory Affairs</option>
<option value="14">Educator, Student</option>
<option value="16">Consultant</option>
<option value="17">Associate, Partner</option>
<option value="18">Finance, Financial Analysis</option>
<option value="15">Other</option>
</select>
<label id="labl">Other: </label>
<input type="text" name="Test_Other" value="">
<SELECT NAME="Test_Type">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">University</option>
<option value="2">State, County, Local Hospital</option>
<option value="3">Private Hospital</option>
<option value="4">Veterans, Military Hospital</option>
<option value="5">Government/Public Health Lab</option>
<option value="6">Commercial Lab</option>
<option value="7">Group Practice, POL</option>
<option value="8">Blood Center, Blood Bank</option>
<option value="9">Basic Research Lab</option>
<option value="10">Pharmaceutical, IVD Manufacturer Lab</option>
<option value="11">Forensic Lab</option>
<option value="12">Veterinary Lab</option>
<option value="18">Reference Lab</option>
<option value="19">Physician Practice</option>
<option value="20">Medical School/College</option>
<option value="13">Other</option>
</select>
<label id="labl">Other: </label>
<input type="text" name="Test_Other1" value="">

rangana
07-02-2008, 12:11 AM
When I put two of these questions on the same page, only the second one works correctly. When they're on separate pages, they both work. Is there something wrong with my code when I combine them?


Yes there is.

You cannot have multiple same function name in one page, you cannot have two onload in one page, asthe second, overrides the first.
See if this modification helps:


<script type="text/javascript">
function reset()
{
var div1=document.getElementById('test');
var div2=document.getElementById('test1');
div1.style.display='none';
div2.style.display='none';
}
window.onload=function()
{
reset();
var opRangt=document.getElementsByTagName('select');
for(var i=0;i<opRangt.length;i++)
{
opRangt[i].onchange=function()
{
if(this.value=='test'||this.value=='test1')
{
document.getElementById(this.value).style.display='';
}
}
}
}
</script>

<SELECT NAME="Test_Position">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">President, VP, Other Executive</option>
<option value="2">Pathologist, Other MD</option>
<option value="3">Director, Assistant Director</option>
<option value="4">Lab Manager, Lab Administrator</option>
<option value="5">Med Tech, Chief Med Tech</option>
<option value="6">Lab Supervisor</option>
<option value="7">POCT, QA, Coordinator</option>
<option value="8">Lab Technologist</option>
<option value="9">Buyer, Purchasing Agent</option>
<option value="10">Research or Development Scientist, Engineer</option>
<option value="11">Manufacturing/ Operations</option>
<option value="12">Marketing, Sales, Analysis</option>
<option value="13">Clinical, Regulatory Affairs</option>
<option value="14">Educator, Student</option>
<option value="16">Consultant</option>
<option value="17">Associate, Partner</option>
<option value="18">Finance, Financial Analysis</option>
<option value="test">Other</option>
</select>
<br>
<!--Enclose this in one div to easily control all the elements-->
<div id="test">
<label id="labl">Other: </label>
<input type="text" name="Test_Other" value="">
</div>
<!------------------------------This Ends the div-------------------------->

<SELECT NAME="Test_Type">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">University</option>
<option value="2">State, County, Local Hospital</option>
<option value="3">Private Hospital</option>
<option value="4">Veterans, Military Hospital</option>
<option value="5">Government/Public Health Lab</option>
<option value="6">Commercial Lab</option>
<option value="7">Group Practice, POL</option>
<option value="8">Blood Center, Blood Bank</option>
<option value="9">Basic Research Lab</option>
<option value="10">Pharmaceutical, IVD Manufacturer Lab</option>
<option value="11">Forensic Lab</option>
<option value="12">Veterinary Lab</option>
<option value="18">Reference Lab</option>
<option value="19">Physician Practice</option>
<option value="20">Medical School/College</option>
<option value="test1">Other</option>
</select>
<br>
<!--Enclose this in one div to easily control all the elements-->
<div id="test1">
<label id="labl">Other: </label>
<input type="text" name="Test_Other1" value="">
</div>
<!------------------------------This Ends the div-------------------------->


See comments on markup changes. Hope it helps.

Kristen
07-02-2008, 02:19 PM
I tried those corrections and now I am only getting a blank screen. When I click on the 'submit' button, it tells me to answer the question and only then does it display the pulldown list and the text boxes, which are not hidden.


<script type="text/javascript">
function reset()
{
var div1=document.getElementById('test');
var div2=document.getElementById('test1');
div1.style.display='none';
div2.style.display='none';
}
window.onload=function()
{
reset();
var opRangt=document.getElementsByTagName('select');
for(var i=0;i<opRangt.length;i++)
{
opRangt[i].onchange=function()
{
if(this.value=='test'||this.value=='test1')
{
document.getElementById(this.value).style.display='';
}
}
}
}
</script>

<SELECT NAME="Test1_Position">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">President, VP, Other Executive</option>
<option value="2">Pathologist, Other MD</option>
<option value="3">Director, Assistant Director</option>
<option value="4">Lab Manager, Lab Administrator</option>
<option value="5">Med Tech, Chief Med Tech</option>
<option value="6">Lab Supervisor</option>
<option value="7">POCT, QA, Coordinator</option>
<option value="8">Lab Technologist</option>
<option value="9">Buyer, Purchasing Agent</option>
<option value="10">Research or Development Scientist, Engineer</option>
<option value="11">Manufacturing/ Operations</option>
<option value="12">Marketing, Sales, Analysis</option>
<option value="13">Clinical, Regulatory Affairs</option>
<option value="14">Educator, Student</option>
<option value="16">Consultant</option>
<option value="17">Associate, Partner</option>
<option value="18">Finance, Financial Analysis</option>
<option value="test">Other</option>
</select>
<br>
<div id="test">
<label id="labl">Other: </label>
<input type="text" name="Test1_Other" value="">
</div>
<SELECT NAME="Test1_Type">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">University</option>
<option value="2">State, County, Local Hospital</option>
<option value="3">Private Hospital</option>
<option value="4">Veterans, Military Hospital</option>
<option value="5">Government/Public Health Lab</option>
<option value="6">Commercial Lab</option>
<option value="7">Group Practice, POL</option>
<option value="8">Blood Center, Blood Bank</option>
<option value="9">Basic Research Lab</option>
<option value="10">Pharmaceutical, IVD Manufacturer Lab</option>
<option value="11">Forensic Lab</option>
<option value="12">Veterinary Lab</option>
<option value="18">Reference Lab</option>
<option value="19">Physician Practice</option>
<option value="20">Medical School/College</option>
<option value="test1">Other</option>
</select>
<br>
<div id="test1">
<label id="labl">Other: </label>
<input type="text" name="Test1_Other1" value="">
</div>

rangana
07-03-2008, 12:47 AM
I'm lost. Your code does'nt even have a form nor a submit button, and your problem explains because of the above said.

Please provide a link to your page so we could have a closer look

Kristen
07-07-2008, 02:47 PM
Changing the variable name made it work correctly (can you explain why that worked?)!

Can you help me with another problem? After 'other' is chosen, the hidden text box stays visible, even if the person chooses another option. In an earlier post, you suggested placing default;reset() after a break, but there is no break in this code. Where would that go in my syntax?


<script type="text/javascript">
function reset()
{
var div1=document.getElementById('rangtest');
var div2=document.getElementById('rangtest1');
div1.style.display='none';
div2.style.display='none';
}
window.onload=function()
{
reset();
var opRangt=document.getElementsByTagName('select');
for(var i=0;i<opRangt.length;i++)
{
opRangt[i].onchange=function()
{
if(this.value=='rangtest'||this.value=='rangtest1')
{
document.getElementById(this.value).style.display='';
}
}
}
}
</script>

<SELECT NAME="Test1_Position">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">President, VP, Other Executive</option>
<option value="2">Pathologist, Other MD</option>
<option value="3">Director, Assistant Director</option>
<option value="4">Lab Manager, Lab Administrator</option>
<option value="5">Med Tech, Chief Med Tech</option>
<option value="6">Lab Supervisor</option>
<option value="7">POCT, QA, Coordinator</option>
<option value="8">Lab Technologist</option>
<option value="9">Buyer, Purchasing Agent</option>
<option value="10">Research or Development Scientist, Engineer</option>
<option value="11">Manufacturing/ Operations</option>
<option value="12">Marketing, Sales, Analysis</option>
<option value="13">Clinical, Regulatory Affairs</option>
<option value="14">Educator, Student</option>
<option value="16">Consultant</option>
<option value="17">Associate, Partner</option>
<option value="18">Finance, Financial Analysis</option>
<option value="rangtest">Other</option>
</select>
<br>
<div id="rangtest">
<label id="labl">Other: </label>
<input type="text" name="Test1_Other" value="">
</div>

<SELECT NAME="Test1_Type">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">University</option>
<option value="2">State, County, Local Hospital</option>
<option value="3">Private Hospital</option>
<option value="4">Veterans, Military Hospital</option>
<option value="5">Government/Public Health Lab</option>
<option value="6">Commercial Lab</option>
<option value="7">Group Practice, POL</option>
<option value="8">Blood Center, Blood Bank</option>
<option value="9">Basic Research Lab</option>
<option value="10">Pharmaceutical, IVD Manufacturer Lab</option>
<option value="11">Forensic Lab</option>
<option value="12">Veterinary Lab</option>
<option value="18">Reference Lab</option>
<option value="19">Physician Practice</option>
<option value="20">Medical School/College</option>
<option value="rangtest1">Other</option>
</select>
<br>
<div id="rangtest1">
<label id="labl">Other: </label>
<input type="text" name="Test1_Other1" value="">
</div>

rangana
07-07-2008, 11:41 PM
See if adding the highlighted helps:


<script type="text/javascript">
function reset()
{
var div1=document.getElementById('rangtest');
var div2=document.getElementById('rangtest1');
div1.style.display='none';
div2.style.display='none';
}
window.onload=function()
{
reset();
var opRangt=document.getElementsByTagName('select');
for(var i=0;i<opRangt.length;i++)
{
opRangt[i].onchange=function()
{
if(this.value=='rangtest'||this.value=='rangtest1')
{
document.getElementById(this.value).style.display='';
}
else reset();
}
}
}
</script>

Kristen
07-08-2008, 01:50 AM
Thanks. I have to wait until morning to try it out- I don't have the program with me. I am starting to explore adding "hidden" sections based on responses to certain questions, but I am not quite sure where everything would go. I'm guessing I would add divs like in the previous examples, but I'm confused about the 'var OpRangt' part of the syntax, and I'm not sure how this would fit in there.

This is my source code from a page with multiple questions. The sections are at the bottom (HospitalQuestions and LabQuestions).


<script type="text/javascript">
function reset()
{
var div1=document.getElementById('othertitle');
var div2=document.getElementById('othertype');
var div3=document.getElementById('hospital');
var div4=document.getElementById('lab');
div1.style.display='none';
div2.style.display='none';
div3.style.display='none';
div4.style.display='none';
}
window.onload=function()
{
reset();
var opRangt=document.getElementsByTagName('select');
for(var i=0;i<opRangt.length;i++)
{
opRangt[i].onchange=function()
{
if(this.value=='othertitle'||this.value=='othertype'||this.value=='hospital'||this.value=='lab')
{
document.getElementById(this.value).style.display='';
}
}
}
}
</script>

<TR>
<TD ALIGN="right">
First Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Last Name<br>
<INPUT TYPE="TEXT" NAME="Name_First" SIZE="30" MAXLENGTH="35">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="TEXT" NAME="Name_Last" SIZE="36" MAXLENGTH="36">
</TD>
</TR>

<TR>
<TD ALIGN="right">
Mailing Address<br>
<INPUT TYPE="TEXT" NAME="Address_Address1" SIZE="75" MAXLENGTH="75"><br>
<INPUT TYPE="TEXT" NAME="Address_Address2" SIZE="75" MAXLENGTH="75">
</TD>
</TR>

<TR>
<TD ALIGN="right">
City&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;State<br>
<INPUT TYPE="TEXT" NAME="CityState_City" SIZE="30" MAXLENGTH="30">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="TEXT" NAME="CityState_State" SIZE="36" MAXLENGTH="36">

</TD>
</TR>

<TR>
<TD ALIGN="right">
Postal Code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Country<br>
<INPUT TYPE="TEXT" NAME="ZipCountry_Zip" SIZE="10" MAXLENGTH="10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="TEXT" NAME="ZipCountry_Country" SIZE="56" MAXLENGTH="56">
</TD>
</TR>

<TR>
<TD ALIGN="right">
Phone #(Direct Line)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fax #&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E-mail Address<br>
<INPUT TYPE="TEXT" NAME="PhoneFaxEmail_Phone" SIZE="15" MAXLENGTH="50">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="TEXT" NAME="PhoneFaxEmail_Fax" SIZE="15" MAXLENGTH="50">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="TEXT" NAME="PhoneFaxEmail_Email" SIZE="27" MAXLENGTH="50">
</TD>
</TR>

Title/Position
<SELECT NAME="TitleFacility_Position">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">President, VP, Other Executive</option>
<option value="2">Pathologist, Other MD</option>
<option value="3">Director, Assistant Director</option>
<option value="4">Lab Manager, Lab Administrator</option>
<option value="5">Med Tech, Chief Med Tech</option>
<option value="6">Lab Supervisor</option>
<option value="7">POCT, QA, Coordinator</option>
<option value="8">Lab Technologist</option>
<option value="9">Buyer, Purchasing Agent</option>
<option value="10">Research or Development Scientist, Engineer</option>
<option value="11">Manufacturing/ Operations</option>
<option value="12">Marketing, Sales, Analysis</option>
<option value="13">Clinical, Regulatory Affairs</option>
<option value="14">Educator, Student</option>
<option value="16">Consultant</option>
<option value="17">Associate, Partner</option>
<option value="18">Finance, Financial Analysis</option>
<option value="othertitle">Other</option>
</select>
<br>
<div id="othertitle">
<label id="labl"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Other: </label>
<input type="text" name="TitleFacility_Other" value="">
</div>
<br><br>
How would you describe the facility in which you work?<br>
<SELECT NAME="TitleFacility_Type">
<OPTION SELECTED VALUE=""></OPTION>
<option value="hospital">Hospital</option>
<option value="lab">Laboratory</option>
<option value="university">Medical School/College/University</option>
<option value="4">Group Practice, POL, Private Practice</option>
<option value="5">Blood Center, Blood Bank</option>
<option value="othertype">Other</option>
</select>
<br>
<div id="othertype">
<label id="labl"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Other: </label>
<input type="text" name="TitleFacility_Other1" value="">
</div>

<div id="hospital">
<label id="labl"></label>
So that we can identify opportunities which are most relevant to you and the work that you do, please answer a few questions about your workplace and your experience in this field.<br>
What type of hospital is your facility?<br>
<SELECT NAME="HospitalQuestions_Type">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">University</option>
<option value="2">State, County, Local Hospital</option>
<option value="3">Private Hospital</option>
<option value="4">Veterans, Military Hospital</option>
<option value="otherhospital">Other</option>
</select><br>
<br>
<br>Please select your area of specialty from the list.<br>
<INPUT TYPE="radio" NAME="HospitalQuestions_Specialty" VALUE="1">A<br>
<INPUT TYPE="radio" NAME="HospitalQuestions_Specialty" VALUE="2">B<br>
<INPUT TYPE="radio" NAME="HospitalQuestions_Specialty" VALUE="3">C<br>
<INPUT TYPE="radio" NAME="HospitalQuestions_Specialty" VALUE="4">D<br>
<br><br>
How many years have you been working in this field?<br>
<INPUT TYPE="TEXT" NAME="HospitalQuestions_Years" SIZE="5" MAXLENGTH="3">
<br><br>
<br>You indicated that you worked in a hospital. Approximately how many beds are in this facility?<br>
<INPUT TYPE="TEXT" NAME="HospitalQuestions_Beds" SIZE="10" MAXLENGTH="10">
</div>

<div id="lab">
<label id="labl"></label>
What type of hospital is your facility?<br>
<SELECT NAME="LabQuestions_Type">
<OPTION SELECTED VALUE=""></OPTION>
<option value="5">Government/Public Health Lab</option>
<option value="6">Commercial Lab</option>
<option value="9">Basic Research Lab</option>
<option value="10">Pharmaceutical, IVD Manufacturer Lab</option>
<option value="11">Forensic Lab</option>
<option value="12">Veterinary Lab</option>
<option value="18">Reference Lab</option>
<option value="otherlab">Other</option>
</select><br>
<br>
<br>Please select your area of specialty from the list.<br>
<INPUT TYPE="radio" NAME="LabQuestions_Specialty" VALUE="1">A<br>
<INPUT TYPE="radio" NAME="LabQuestions_Specialty" VALUE="2">B<br>
<INPUT TYPE="radio" NAME="LabQuestions_Specialty" VALUE="3">C<br>
<INPUT TYPE="radio" NAME="LabQuestions_Specialty" VALUE="4">D<br>
<br><br>
How many years have you been working in this field?<br>
<INPUT TYPE="TEXT" NAME="LabQuestions_Years" SIZE="5" MAXLENGTH="3">
<br><br>
<br>You indicated that you worked in a laboratory. Is this facility independent or is it hospital-affiliated?<br>
<INPUT TYPE="radio" NAME="LabQuestions_IndepOrHosp" VALUE="1">Independent<br>
<INPUT TYPE="radio" NAME="LabQuestions_IndepOrHosp" VALUE="2">Hospital-Affiliated
</div>

<br>
<div id="submit_button">
<input type="submit" value=" Next " >
</div>

Thanks!

Kristen
07-09-2008, 03:38 PM
Okay, I've got the follow-up section showing up when "hospital" is chosen, and it disappears if they choose another facility type. (Yay!) However, if they choose "hospital", when the section shows up and they click on anything in the first follow-up question, the entire section disappears. Why is this happening?


<script type="text/javascript">
function reset()
{
var div1=document.getElementById('othertitle');
var div2=document.getElementById('othertype');
var div3=document.getElementById('hospital');
div1.style.display='none';
div2.style.display='none';
div3.style.display='none';
}
window.onload=function()
{
reset();
var opRangt=document.getElementsByTagName('select');
for(var i=0;i<opRangt.length;i++)
{
opRangt[i].onchange=function()
{
if(this.value=='othertitle'||this.value=='othertype'||this.value=='hospital')
{
document.getElementById(this.value).style.display='';
}
else reset();
}
}
}
</script>

Title/Position
<SELECT NAME="TitleFacility1_Position">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">President, VP, Other Executive</option>
<option value="2">Pathologist, Other MD</option>
<option value="3">Director, Assistant Director</option>
<option value="4">Lab Manager, Lab Administrator</option>
<option value="5">Med Tech, Chief Med Tech</option>
<option value="6">Lab Supervisor</option>
<option value="7">POCT, QA, Coordinator</option>
<option value="8">Lab Technologist</option>
<option value="9">Buyer, Purchasing Agent</option>
<option value="10">Research or Development Scientist, Engineer</option>
<option value="11">Manufacturing/ Operations</option>
<option value="12">Marketing, Sales, Analysis</option>
<option value="13">Clinical, Regulatory Affairs</option>
<option value="14">Educator, Student</option>
<option value="16">Consultant</option>
<option value="17">Associate, Partner</option>
<option value="18">Finance, Financial Analysis</option>
<option value="othertitle">Other</option>
</select>
<br>
<div id="othertitle">
<label id="labl"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Other: </label>
<input type="text" name="TitleFacility1_Other" value="">
</div>
<br><br>
How would you describe the facility in which you work?<br>
<SELECT NAME="TitleFacility1_Type">
<OPTION SELECTED VALUE=""></OPTION>
<option value="hospital">Hospital</option>
<option value="lab">Laboratory</option>
<option value="university">Medical School/College/University</option>
<option value="practice">Group Practice, POL, Private Practice</option>
<option value="bloodcenter">Blood Center, Blood Bank</option>
<option value="othertype">Other</option>
</select>
<br>
<div id="othertype">
<label id="labl"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Other: </label>
<input type="text" name="TitleFacility1_Other1" value="">
</div>
<br>
<div id="hospital">
<label id="labl"></label>
So that we can identify opportunities which are most relevant to you and the work that you do, please answer a few questions about your workplace and your experience in this field.<br>
What type of hospital is your facility?<br>
<SELECT NAME="TitleFacility1_HospQType">
<OPTION SELECTED VALUE=""></OPTION>
<option value="1">University</option>
<option value="2">State, County, Local Hospital</option>
<option value="3">Private Hospital</option>
<option value="4">Veterans, Military Hospital</option>
<option value="otherhospital">Other</option>
</select><br>
<br>
<br>Please select your area of specialty from the list.<br>
<INPUT TYPE="radio" NAME="TitleFacility1_HospQSpec" VALUE="1">A<br>
<INPUT TYPE="radio" NAME="TitleFacility1_HospQSpec" VALUE="2">B<br>
<INPUT TYPE="radio" NAME="TitleFacility1_HospQSpec" VALUE="3">C<br>
<INPUT TYPE="radio" NAME="TitleFacility1_HospQSpec" VALUE="4">D<br>
<br><br>
How many years have you been working in this field?<br>
<INPUT TYPE="TEXT" NAME="TitleFacility1_HospQYears" SIZE="5" MAXLENGTH="3">
<br><br>
<br>You indicated that you worked in a hospital. Approximately how many beds are in this facility?<br>
<INPUT TYPE="TEXT" NAME="TitleFacility1_HospQBeds" SIZE="10" MAXLENGTH="10">
</div>