Solved

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

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

773 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