Solved

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

Posted on 2016-08-19
3
76 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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

756 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