[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Conditional List box - display parts of form

Posted on 2004-04-16
13
Medium Priority
?
432 Views
Last Modified: 2008-01-09
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
0
Comment
Question by:FAWKE
  • 6
  • 3
  • 2
  • +2
13 Comments
 
LVL 31

Expert Comment

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

http://www.experts-exchange.com/Web/Web_Languages/ASP/Q_20955847.html
0
 
LVL 2

Author Comment

by:FAWKE
ID: 10841783
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
0
 
LVL 10

Expert Comment

by:D_M_D
ID: 10841945
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
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 31

Expert Comment

by:alorentz
ID: 10841966
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

%>
0
 
LVL 2

Author Comment

by:FAWKE
ID: 10842118
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.....
0
 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10858292
Any chance you could paste in your complete form so we can get a better picture of what you are trying to do - cheers.
0
 
LVL 2

Author Comment

by:FAWKE
ID: 10858410
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




0
 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10858486
Hmmm, I think maybe pasting in the whole page might be a better idea.
0
 
LVL 2

Author Comment

by:FAWKE
ID: 10858940
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>&nbsp;</td>
            <td>&nbsp;</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>&nbsp;</td>
            <td>&nbsp;</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">&nbsp;</p>
        </div>
    </form></td>
  </tr>
</table>
</body>
</html>
********
0
 
LVL 6

Accepted Solution

by:
Lord_McFly earned 860 total points
ID: 10859757
Here you go my friend. I removed the DIVs - and implemented something a lot easier.

<html>
<head>
<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>
</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">
   
   
        <table width="45%" >
            <tr>
              <td width="47%"><div align="left">Incentive Type: </div></td>
              <td width="53%">
              <select name="lstType" onChange="Show(this)">
                <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>
         
         
          <table width="700" border="0" cellpadding="5" cellspacing="0" ID="Show_1" style="display: none">
          <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>
       
          <table width="700" border="0" cellpadding="5" cellspacing="0" ID="Show_2" style="display: none">
          <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>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
       
          <table width="700" border="0" cellpadding="5" cellspacing="0" ID="Show_3" style="display: none">
          <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>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
     
          <table width="700" border="0" cellpadding="5" cellspacing="0" ID="Show_4" style="display: none">
          <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>

<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">&nbsp;</p>
        </div>
    </form></td>
  </tr>
</table>
</body>
</html>
0
 
LVL 2

Author Comment

by:FAWKE
ID: 10859924
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!
0
 

Expert Comment

by:jayme9
ID: 11179782
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>
0
 
LVL 2

Author Comment

by:FAWKE
ID: 11200991
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
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I would like to start this tip/trick by saying Thank You, to all who said that this could not be done, as it forced me to make sure that it could be accomplished. :) To start, I want to make sure everyone understands the importance of utilizing p…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Loops Section Overview
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question