Linked dropdowns

**nandhajj** · Jan 25, 2011 06:43

hi,

i have one list/menu in my form..i put values like

1.Employed
2.A business owner
3.Looking for work
4.Working independently
5.A student

if i select a 1.Employed
2.A business owner
3.Looking for work
4.Working independently, value its only display these text box

country,postalcode,jobtitle,company..

but if u select 5.A student then it display
education,dates attended,fields of interests.
so these values hidden when click
1.Employed
2.A business owner
3.Looking for work
4.Working independentl..

Reference:linkedin:https://www.linkedin.com/reg/basic-p...=p4rdx-16k61ld

how can i work out tat..anyone solve this problem..

**paul_wilkins** · Jan 26, 2011 02:58

Here's how you should do it.

1. Use scripting to attach a function to an onchange event for the select field.
2. In that function, find out which select field is currently selected
3. hide all of the optional parts of the form
4. based on the selected field, show the parts that should be shown

Do you have any ability to try scripting that yourself, or do you require someone to do all of the scripting for you?

**AllanP** · Jan 28, 2011 01:41

Here is a way to do it. I have used tables to display your input boxes to keep it all aligned. You will need to extract the information from the text boxes within the form when they are completed by the applicant.

Code :

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Form selection</title>
<script type="text/javascript">
<!--
var currentBlockRef=null, currentElemObj=null;   // global
//
 function getSelect(selectObj)
  { var indx=selectObj.selectedIndex;
   // check for invalid selection
    if(indx==0)
     { // hide any visible box 
       currentElemObj.style.display="none";
       currentElemObj=null;
       currentBlockRef=null;
       return; 
     }
   // -------
   // check if block ref saved 
    if(currentBlockRef)
     { // hide any visible block
       currentElemObj.style.display="none";
      } // get next ref   
       currentBlockRef=(indx<5)? "block1" : "block2";    
       currentElemObj=document.getElementById(currentBlockRef);
       currentElemObj.style.display="block";
   } 
// -------------   
//-->
</script>
<style type="text/css">
<!--
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; }
table td { height:40px; padding:3px; border-bottom:1px solid #888; }
#wrapper { position:absolute; top:20px; left:50px; text-align:left;  }
#selectBox  { position:absolute; top:0px; left:0px; text-align:left;  } 
#block1  { display:none; position:absolute; top:50px; left:0px; text-align:left;  } 
#block2  { display:none; position:absolute; top:50px; left:0px; text-align:left;  } 
-->
</style>
</head>
 
<body>
 
<form name="myForm">
  <div id="wrapper">
    <div id="selectBox">
      <select name="mySelect" onchange="getSelect(this)">
      <option>Select a description that best describes you ..</option>
      <option>Employed</option>
      <option>A business owner</option>
      <option>Looking for work</option>
      <option>Working independently</option>
      <option>A student</option>
      </select>
    </div>
    <!-- end selectBox -->
    <div id="block1">
      <table cellspacing="0" style="border-collapse: collapse" width="300">
        <tr>
          <td>Country:</td>
          <td><input type="text" name="country" value size="20"></td>
        </tr>
        <tr>
          <td>Post Code:</td>
          <td><input type="text" name="pCode" value size="20"></td>
        </tr>
        <tr>
          <td>Job Title:</td>
          <td><input type="text" name="jTitle" value size="20"></td>
        </tr>
        <tr>
          <td>Company Name:</td>
          <td><input type="text" name="companyName" value size="20"></td>
        </tr>
      </table>
    </div>
    <!-- end block1 -->
    <div id="block2">
      <table cellspacing="0" style="border-collapse: collapse" width="300">
        <tr>
          <td>Education:</td>
          <td><input type="text" name="educ" value size="20"></td>
        </tr>
        <tr>
          <td>Dates attended:</td>
          <td><input type="text" name="datesAttend" value size="20"></td>
        </tr>
        <tr>
          <td>Fields of interest:</td>
          <td><input type="text" name="fieldsInterest" value size="20"></td>
        </tr>
      </table>
    </div>
    <!-- end block2 -->
  </div>
  <!-- end wrapper -->
</form>
<!-- end myForm -->
 
</body>
 
</html>

User Tag List

Thread: Linked dropdowns

Thread Tools

Display

Linked dropdowns

Bookmarks

Bookmarks

Posting Permissions