Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2016-08-19
3
Medium Priority
?
91 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
[X]
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
  • 2
3 Comments
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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 to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…
Suggested Courses

618 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