• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 187
  • Last Modified:

dynamic form elemnts for select option

Hi Guys,

i turn to u as my last hope.

i have a requirement as follows.i need a javascript that will dynamically populate form elements like text box,drop down box,ete based on select option.

i dont mind even if these form elements are hidden and become activated onChange of select box.

for ex:
<select name="leavetype">
<option value="A">Maternity Leave</option>
<option value="B">Compensatory Leave</option>
<option value="C">Bevearment Leave</option>
</select>

now when i select option A, an input type =text must be populated in the html page.
when i select B, a drop down box must be popultaed.

i hope u get the idea.pl pl pl pl do help.hope this will work in both browsers ie and ns.

thanks in advance ;
guru
0
guruaxy
Asked:
guruaxy
1 Solution
 
hexagon47Commented:
<html>
<head>

<script type="text/javascript">

function showInput()
{
document.getElementById('relOption1').style.display = 'block';
document.getElementById('inputOpt1').value = 'whatever';
}
function showSelect()
{
document.getElementById('relOption1').style.display = 'none';
document.getElementById('relOption2').style.display = 'block';
document.getElementById('relOption3').style.display = 'none';
}
function showText()
{
document.getElementById('relOption1').style.display = 'none';
document.getElementById('relOption2').style.display = 'none';
document.getElementById('relOption3').style.display = 'block';
}

function decide()
{
if(myForm.mySelect.options[1].selected)
{
showInput();
}
if(myForm.mySelect.options[2].selected)
{
showSelect();
}
if(myForm.mySelect.options[3].selected)
{
showText();
}
}</script>
</head>
<body>

<form action="" name="myForm">

<select name="mySelect" onchange="decide()">
     <option>please select</option>
     <option>show input box</option>
     <option>show select</option>
     <option>show text</option>
</select>

<div id="relOption1" style="display:none">
<input type="text" value="" id="inputOpt1" />
</div>
</form>

<div id="relOption2" style="display:none">
<select name="mySubSelect">
     <option>option1</option>
     <option>option2</option>
     <option>option3</option>
</select>
</div>

<div id="relOption3" style="display:none">
just text
</div>

</form>

</body>
</html>

i hope this helps you
0
 
jaysolomonCommented:
*******************************************************
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
*******************************************************
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area:
RECOMMENDATION:

 - [Points to hexagon47 Grade B]

Please leave any comments here within the next seven days.
*******************************************************
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
*******************************************************

jAy
EE Cleanup Volunteer
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now