Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Pulldown Menu Show/Hide

  1. #1
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Pulldown Menu Show/Hide

    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>

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    I've had answer this for your in CF. Seemed you miss to visit your thread
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. The Following User Says Thank You to rangana For This Useful Post:

    tqla (05-13-2008)

  4. #3
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks rangana! Yes I missed that. I'll try it now. Thanks again.

  5. #4
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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>

  6. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Just add this code right after the last break;
    Code:
    default:
    reset();
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  7. #6
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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>

  8. #7
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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();
    }
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  9. The Following User Says Thank You to rangana For This Useful Post:

    tqla (05-13-2008)

  10. #8
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    That's it! Awesome. Thanks rangana.

  11. #9
    Join Date
    Jun 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  12. #10
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •