Solved

Conditional List box - display parts of form

Posted on 2004-04-16
13
389 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 31

Expert Comment

by:alorentz
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 2

Author Comment

by:FAWKE
Comment Utility
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
Comment Utility
Hmmm, I think maybe pasting in the whole page might be a better idea.
0
 
LVL 2

Author Comment

by:FAWKE
Comment Utility
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 215 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:  The Exchange of information …
Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now