Solved

Hide fields dependant on Dropdown value

Posted on 2014-04-30
1
238 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
1 Comment
 
LVL 52

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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).

867 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

19 Experts available now in Live!

Get 1:1 Help Now