Solved

Hide fields dependant on Dropdown value

Posted on 2014-04-30
1
241 Views
Last Modified: 2014-05-04
Hi Experts,


I have the following ASP code which gets its values from a MDB. The options pulled from the MDB are Yes and No:

  <td style="width:160px;" colspan="2" class="TableSubSection">
       
          <select style="width:200px;" id="Select1" size="1" name="x_TrialSoftware">
          <% FillComboBox "tblTrialSoftware","TrialSoftwareID","TrialSoftware",x_TrialSoftware, true %>
        </select>
      </td>

What i want to do is, if the user selects Yes from the dropdown another free txt box should appear:

    <tr>
      <th style="width:12%;" class="TableSubSection">
     Is this a trial piece of software:*<a href="#" class="tooltip" style="color:white"><img src="images/information.png" style="border:none;height:20px;width:20px" /> <span>Please specify if you have a requirement to trial the software prior to it going into Production. (Please be aware that LV=’s general rule is a maximum of three users to trial providing the vendor’s license terms and conditions permits.)</span>     </a>  
      </th>
      <td style="width:88%" class="FieldEditable">
          <input style="width: 97%" id="x_TrialSoftware" name="x_TrialSoftware" value="<%=x_TrialSoftware%>" maxlength="70" size="93"/>
      </td>
      </tr>
     

I have attached an attachment to explain further,

Many thanks,
ee.jpg
0
Comment
Question by:Richiep86
[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
1 Comment
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40031768
Here is a solution using JQuery
Replace the select and textbox value with your asp code to initialise the page
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('#Select1').change(function() {
    if ($(this).val() == 'Yes') {
      $('#Select1_input').fadeIn(300);
    }
    else {
      $('#Select1_input').hide();
    }
  });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<table>
  <tr>
    <th style="width:12%;" class="TableSubSection">
      Is this a trial piece of software:*<a href="#" class="tooltip" style="color:white"><img src="images/information.png" style="border:none;height:20px;width:20px" /> <span>Please specify if you have a requirement to trial the software prior to it going into Production. (Please be aware that LV=’s general rule is a maximum of three users to trial providing the vendor’s license terms and conditions permits.)</span>     </a>  
    </th>
    <td style="width:160px;" colspan="2" class="TableSubSection">
      <select style="width:200px;" id="Select1" size="1" name="x_TrialSoftware">
        <option value="">Please Select</option>
        <option value="No">No</option>
        <option value="Yes">Yes</option>
      </select>
    </td>
  </tr>
  <tr  id="Select1_input" style="display:none">
    <th style="width:12%;" class="TableSubSection">
      Is this a trial piece of software:*<a href="#" class="tooltip" style="color:white"><img src="images/information.png" style="border:none;height:20px;width:20px" /> <span>Please specify if you have a requirement to trial the software prior to it going into Production. (Please be aware that LV=’s general rule is a maximum of three users to trial providing the vendor’s license terms and conditions permits.)</span>     </a>  
    </th>
    <td style="width:88%" class="FieldEditable">
      <input style="width: 97%" id="x_TrialSoftware" name="x_TrialSoftware" value="test" maxlength="70" size="93"/>
    </td>
  </tr>
</table>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/t659.html
0

Featured Post

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Error in Angular 2 when showing in grid 4 66
Code Coverage and Coding Standards 2 79
Partnership Agreement 2 43
Problem to copy file 14 89
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

734 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