Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

show region if a selection is made on a drop down menu

Posted on 2016-08-19
3
68 Views
Last Modified: 2016-08-19
I am using bootstrap and ASP classic.
I have a form with a drop down menu. I want to display some of the table rows IF one of the selections in the menu is made, if any other is made the region should remain hidden, if user selects it should show, if user changes selection then it should hide.

Is there such functionality possible with bootratrp/jquery ?   How can I do this ?

Here is my menu code:

   <div class="form-group">
  <div class="col-sm-10">
    <select name="form" size="1" class="form-control m-b" id="form">
      <option value="">Please select a form</option>
      <%
While (NOT rs_forms.EOF)
%>
      <option value="<%=(rs_forms.Fields.Item("FormName").Value)%>"><%=(rs_forms.Fields.Item("FormName").Value)%></option>
      <%
  rs_forms.MoveNext()
Wend
If (rs_forms.CursorType > 0) Then
  rs_forms.MoveFirst
Else
  rs_forms.Requery
End If
%>
    </select>
  </div>
</div>

Open in new window


This are the rows I want to show/hide

                            <tr>
                                <td>Page</td>
                                <td><div class="form-group">
                                  <div class="col-sm-10">
                                    <input name="page" type="text" class="form-control" id="page" value="" maxlength="50">
                                  </div>
                                </div></td>
                              </tr>
                              <tr>
                                <td>Section</td>
                                <td><div class="form-group">
                                  <div class="col-sm-10">
                                    <input name="section" type="text" class="form-control" id="section" value="" maxlength="50">
                                  </div>
                                </div></td>
                              </tr>
                              <tr>
                                <td>Question #</td>
                                <td><div class="form-group">
                                  <div class="col-sm-10">
                                    <input name="question" type="text" class="form-control" id="question" value="" maxlength="50">
                                  </div>
                                </div></td>
                              </tr>

Open in new window

0
Comment
Question by:amucinobluedot
  • 2
3 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 41763290
This should answer your question or at least give you what you need to get started.  I am only using rendered html and  you will need to generate some of this with your asp code

There is a working sample of the code below here http://jsbin.com/qaxeratija/edit?html,output
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>

<body>
  <select id="getForm">
    <option value="">Please Select</option>
    <option value="getFormPage">Page</option>
    <option value="getFormSection">Section</option>
    <option value="getFormQuestion">Question</option>
  </select>
    <table>
        <tr class="getFormPage">
            <td>Page</td>
            <td>
                <div class="form-group">
                    <div class="col-sm-10">
                        <input name="page" type="text" class="form-control" id="page" value="" maxlength="50">
                    </div>
                </div>
            </td>
        </tr>
        <tr class="getFormSection">
            <td>Section</td>
            <td>
                <div class="form-group">
                    <div class="col-sm-10">
                        <input name="section" type="text" class="form-control" id="section" value="" maxlength="50">
                    </div>
                </div>
            </td>
        </tr>
        <tr class="getFormQuestion">
            <td>Question #</td>
            <td>
                <div class="form-group">
                    <div class="col-sm-10">
                        <input name="question" type="text" class="form-control" id="question" value="" maxlength="50">
                    </div>
                </div>
            </td>
        </tr>
    </table>

    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    $(function() { // RUN ON PAGE LOAD
      // HIDE ALL
      $('[class^="getForm"]').hide(); //NOTE WILD CARD

      $('select#getForm').on('change', function() {
          $('[class^="getForm"]').hide(); //HIDE ALL
          // NOW SHOW ONLY THE SELECTED
          var formName = $(this).val(); // VALUE OF SELECTED
          $('.' + formName).show();  // SHOW IT

      });

  });
  </script>

</body>

</html>

Open in new window


You can use jsbin to change things around to meet your own needs.  If you need something changed, please try and play on the jsbin site or your own.  

Some quick notes on your code...

You are using bootstrap and that is built around a responsive grid.  That is where you should be placing your form so nix the the table for formatting.  

On the sever side, you are Requery which sends another call to the database.  It will be more efficient to throw your data to an array via getRows() and close your connection right away. Then you can access your array as many times as you want.  Another option is to place your data in a client side array or json and use javascript/jquery to reuse data.  

That is all for another day though.
0
 

Author Comment

by:amucinobluedot
ID: 41763315
I appreciate the feedback, definitely for another day :)  Ill try the code above first.
0
 

Author Comment

by:amucinobluedot
ID: 41763316
Tested and it does what I need, thanks !
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

828 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