Solved

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

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
This video teaches users how to migrate an existing Wordpress website to a new domain.

708 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

14 Experts available now in Live!

Get 1:1 Help Now