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

Code:

<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. 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.

Code:

<!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;

Code:

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.

Code:

<?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:

Code:

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:

Code:

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?

Code:

//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:

Code:

<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.