asked on

Conditional List box - display parts of form

Hi there,

I need a page where a user selects a value from a menu/list box, and a certain part of a form is dislpayed.
Ideally (probs the easiest way for me) is to create 1 form with all the text boxes etc and then when a user selects a value from the initial list box the relative boxes are dislpayed.

Any help or examples of this much appreciated.
Can you have subforms of a form? if so how could i disable/enable a sub form upon selecting a list box value?

*********
<select name="lstType" id="lstType">
<option selected>Please select the value......</option>
<option value="val_1">value1</option>
<option value="val_2">value2</option>
<option value="val_3">value3</option>
<option value="val_4">value4</option>
</select>
*********

Thanks

Fawke

alorentz

See here for similar answer. You should post back to the same form, then show area depending on selection:

https://www.experts-exchange.com/questions/20955847/asp-dynamic-pulldown-menu.html

FAWKE

ASKER

Thanks for that,

Ok great, iv got the onchange JS event working; But how do i display parts of a form based on the selection made, rather than selecting fields from a database??

Anything more solution specific??

Thanks again

D_M_D

Disable the parts of the form that should be hidden then on the onchange enable them based on the selection.

YOu can add DISABLED to the elements that you want hidden then in your javascript enable them after a choice has been selected...

document.form1.somefield.disabled = false;

--------
D_M_D

alorentz

Basically whatever is selected in the box will depict what is show on page. You would control that in VBScript Server Side.

<%

if request("dropdown1") = "blah" then
'show this area
elseif request("dropdown1") = "foo" then
'show other area
end if

%>

FAWKE

ASKER

Its the 'show this/other area bit that im stuggling with.

So if i make the areas in the form disabled, and then onchange display the areas.
I am by no means a javascript developer, could you give me an examples of how i can do this serverside or clientside??

Thanks guys.....

Lord_McFly

Any chance you could paste in your complete form so we can get a better picture of what you are trying to do - cheers.

FAWKE

ASKER

OK, i have come up with some Javascript that displays relevant parts of a form in relation to what is displayed in the list box.
This seems easier than doing it server side.

A javascript seveloper gave me the idea, but i keep getting an error message stating that lstType is undefined....
I realise this is a ASP newsgroup, so apologies for this....

Below is the JS used =

*****
<SCRIPT type="text/javascript">
function lstType_onchange()
{
{
case "val_1":
showDiv("div1")
break
case "val_2":
showDiv("div2")
break
case "val_3":
showDiv("div3")
break
case "val_4":
showDiv("div4")
break
}
}
function showDiv(pDiv)
{
var i, oDiv
var divs=new array("div1","div2", "div3","div4")
for (var i=0;i<3;i++)
{
oDiv=document.getElementById(divs[i])
oDiv.style.diplay = "none"
if (divs[i] == pDiv) {oDiv.style.diplay = "block"}
}
}
</SCRIPT>
*****

The tables within the Div's make up the form and the div stlyes are all set to display:none so the JS should make them appear in relation to the onchange event in the list box lstType =

*****
<select name="lstType" id="lstType" onChange="return lstType_onchange();">
<option value="val1">BLA<option>
<option value="val2">BLABLA</option>
<option value="val3">BLABLABLA</option>
<option value="val4">BLABLABLABLA</option>
</select>
*****

Any ideas on why this JS isnt working?
Or any ideas on anything else i could try?

Thanks

Fawke

Lord_McFly

Hmmm, I think maybe pasting in the whole page might be a better idea.

FAWKE

ASKER

OK, bearing in mind i did it in dreamweaver design, so there maybe uneccessary code in there ;-)
Paste this all into notepad, you should get the idea......

******
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<SCRIPT type="text/javascript">
function lstType_onchange()
{
switch (lstType.value)
{
case "Reg":
showDiv("div1")
break
case "Prod_Purch":
showDiv("div2")
break
case "Prod_Bank":
showDiv("div3")
break
case "Specif_Prod":
showDiv("div4")
break
}
}
function showDiv(pDiv)
{
var i, oDiv
var divs=new array("div1","div2", "div3","div4")
for (var i=0;i<3;i++)
{
oDiv=document.getElementById(divs[i])
oDiv.style.diplay = "none"
if (divs[i] == pDiv) {oDiv.style.diplay = "block"}
}
}
</SCRIPT>

</head>

<body>
<table width="775" border="0" cellpadding="5" cellspacing="0">
<tr>
<td align="center" valign="middle"><form action="" method="post" name="frmAdd" class="style34" id="frmAdd">
<div align="center">
<table width="45%" >
<tr>
<td width="47%"><div align="left">Incentive Type: </div></td>
<td width="53%"><select name="lstType" id="lstType" onChange="return lstType_onchange();">
<option value="NULL" selected>Please select the incentive type......</option>
<option value="Reg">Registration Period</option>
<option value="Prod_Purch">Product Purchase Period</option>
<option value="Prod_Bank">Product Banking Period</option>
<option value="Specif_Prod">Specific Product</option>
</select></td>
</tr>
</table>
<span class="style38">

<br>
</span>
<div id=div1 style="display:none">
            <table width="700" border="0" cellpadding="5" cellspacing="0">
<tr bgcolor="#00395A">
<td width="182"><div align="left" class="style35">Registration Start Date:</div></td>
<td width="144"><div align="left" class="style35">
<input name="regStartDate" type="text" id="regStartDate">
</div></td>
<td width="190"><div align="left" class="style35">Registration End Date:</div></td>
<td width="144"><div align="right" class="style35">
<input name="regEndDate" type="text" id="regEndDate">
</div></td>
</tr>
</table>
</div>
<br>
<div id=div2 style="display:none" >
            <table width="700" border="0" cellpadding="5" cellspacing="0">
<tr bgcolor="#00395A">
<td width="182"><div align="left" class="style35">Product Puchased Start Date:</div></td>
<td width="144"><div align="left" class="style35">
<input name="prodpurchStartDate" type="text" id="prodpurchStartDate">
</div></td>
<td width="190"><div align="left" class="style35">Product Purchased End Date:</div></td>
<td width="144"><div align="right" class="style35">
<input name="prodpurchEndDate" type="text" id="prodpurchEndDate">
</div></td>
</tr>
<tr bgcolor="#00395A">
<td><div align="left"><span class="style35">Product ID:</span></div></td>
<td><div align="left"><span class="style35">
<input name="prodpurchID" type="text" id="prodpurchID">
</span></div></td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<br>
<div id=div3 style="display:none">
            <table width="700" border="0" cellpadding="5" cellspacing="0">
<tr bgcolor="#00395A">
<td width="185"><div align="left" class="style35">Product Banked Start Date:</div></td>
<td width="144"><div align="left" class="style35">
<input name="prodbankDate" type="text" id="prodbankDate">
</div></td>
<td width="187"><div align="left" class="style35">Product Banked End Date:</div></td>
<td width="144"><div align="right" class="style35">
<input name="prodbankEndDate" type="text" id="prodbankEndDate">
</div></td>
</tr>
<tr bgcolor="#00395A">
<td><div align="left"><span class="style35">Product ID:</span></div></td>
<td><div align="left"><span class="style35">
<input name="prodbankID" type="text" id="prodbankID">
</span></div></td>
<td> </td>
<td> </td>
</tr>
</table>
</div>

<div id=div4 style="display:none">
            <table width="700" border="0" cellpadding="5" cellspacing="0">
<tr bgcolor="#00395A">
<td width="185"><div align="left" class="style35">Specific Product Start Date:</div></td>
<td width="144"><div align="left" class="style35">
<input name="specStartDate" type="text" id="specStartDate">
</div></td>
<td width="187"><div align="left" class="style35">Specific Product End Date:</div></td>
<td width="144"><div align="right" class="style35">
<input name="specEndDate" type="text" id="specEndDate">
</div></td>
</tr>
<tr bgcolor="#00395A">
<td><div align="left" class="style35">Product ID:</div></td>
<td><div align="left" class="style35">
<input name="specID" type="text" id="specID">
</div></td>
<td><span class="style35"></span></td>
<td><span class="style35"></span></td>
</tr>
</table>
</div>

<table width="700" border="0" cellpadding="5" cellspacing="0">
<tr bgcolor="#FFFFFF">
<td width="131"><div align="left">Promotion ID: </div></td>
<td width="372"><div align="left" class="style36">
<input name="promo_ID" type="text" id="promo_ID" size="2" maxlength="2">
</div></td>
<td width="145"><div align="left" class="style36">Language:</div></td>
<td width="12"><div align="right" class="style36">
<input name="Lang" type="text" id="Lang" size="2" maxlength="2">
</div></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><div align="left">Incentive Description: </div></td>
<td colspan="3"><div align="left" class="style36">
<div align="left">
<input name="desc" type="text" id="desc" size="89">
</div>
</div></td>
</tr>
</table>
<p>
<input name="btnAdd" type="submit" id="btnAdd" value="Add">
<br>
<br>
</p>
<p align="left"> </p>
</div>
</form></td>
</tr>
</table>
</body>
</html>
********

ASKER CERTIFIED SOLUTION

Lord_McFly

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

FAWKE

ASKER

What a diamond.

I did get the other one working, but this is alot nicer and more efficient!!
You truly are a star,

keep up the good work!

jayme9

I have two questions. 1st of all, I got the example working fine. The user selects from a listbox and a tailored menu of links become visible. Only two problems I found though:

1. Since a default value will ALWAYS be selected in the listbox when a user comes to this page, the tailored menu based on that listbox value needs to be displayed from the beginning without the user having to reselect it from the listbox again in order for the menu to display.

2. Since my listbox is dynamic (values in it are dependant on the logged in user), I find that using "var i" is more of a static approach. I would need to modify this so that "var i" is equal to specific values from the listbox. For example, i="Admin" or i="{all other possible selections}"
So that if the user selects Admin in the listbox, the "Show_admin" div displays. Else any other selection from the listbox would "Show_normalmenu" div displays.

Again, the example I have is working, but it will produce or display the wrong DIV if the number of values in the listbox change at all. Perhaps it is only a slight modification to this code below? If so, I'd like to know how. Thank you. Good examples!!!

<SCRIPT type="text/javascript">
function Show(Object)
{
var index = Object.selectedIndex
var i

for(i=1; i<=4; i++)
{
if(i==index)
{
document.getElementById("Show_"+i).style.display = ""
}
else
{
document.getElementById("Show_"+i).style.display = "none"
}
}
}
</SCRIPT>

FAWKE

ASKER

As this question is now in the PAQ section, i would consider setting up a new thread. You will usually get a pretty instant response then.
The experts who answered my question will probably prioritise the current open threads rather than PAQs, i may be wrong though.

They solved my problem so its well worth it!

Regards

FAWKE