Linked dropdowns

JavaScript
1

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…

[COLOR=“Red”]Reference:linkedin:https://www.linkedin.com/reg/basic-profile?_l=en&flow=p4rdx-16k61ld[/COLOR]

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

2

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?

3

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.

[HIGHLIGHT=“”]
<!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>