CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Spencer
Spencer

Reputation: 22370

Javascript hide and show form not working

This is a follow up question. I am trying to get a input box to be hidden when a pull-down menu has the value "tid and acc". I am at a loss why this code isn't working, any help would much appreciated! Here is a link on jfiddle: http://jsfiddle.net/Mm7c7/

<script> 
$('#rule-type').change(function() {
       var val = $(this).val();
       if (val == 'tid and acc') {
          $('#tid-acc').show();
       }
       else {
          $('#tid-acc').hide(); 
       }
    });
</script>
<select id="rule-type">
    <option value="" selected="selected">None</option>
    <option value="tid">tid</option>
    <option value="tid and acc">tid and acc</option>
    <option value="xid">xid</option>
</select>
<input id="tid-acc">

Upvotes: 1

Views: 502

Answers (3)

NakedBrunch
NakedBrunch

Reputation: 49413

Take a look here for a working sample: http://jsfiddle.net/Mm7c7/1/

HTML:

<select id="rule-type">
    <option value="" selected="selected">None</option>
    <option value="tid">tid</option>
    <option value="tid and acc">tid and acc</option>
    <option value="xid">xid</option>
</select>
<input id="tid-acc">

Javascript:

   $('#rule-type').change(function() {
       var val = $(this).val();
       if (val == 'tid and acc') {
          $('#tid-acc').show();
       }
       else {
          $('#tid-acc').hide(); 
       }
    });

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78520

Your script is being evaluated before your element is ready. Placing the script in a $(document).ready() or after the content it affects will solve the problem

http://jsfiddle.net/Wx8Jf/2

$(document).ready(function(){
    $('#rule-type').change(function() {
       var val = $(this).val();
       if (val == 'tid and acc') {
          $('#tid-acc').show();
       }
       else {
          $('#tid-acc').hide(); 
       }
    });
});

Upvotes: 2

Demian Brecht
Demian Brecht

Reputation: 21368

Couple problems:

  1. You'll either need to wrap the function in $(function(){}) to ensure DOM is ready, or drop it below your HTML (the former is recommended). If you don't wrap it (or drop it), then the script is executed before the elements have actually been rendered, causing $('#rule-type') to be undefined.
  2. Your logic is incorrect (according to your explanation). Your current logic says to hide the input box when anything other than tid and acc is selected.

Working version:

<script> 
$(function(){
$('#rule-type').change(function() {
       var val = $(this).val();
       if (val == 'tid and acc') {
          $('#tid-acc').hide();
       }
       else {
          $('#tid-acc').show(); 
       }
    });
});
</script>
<select id="rule-type">
    <option value="" selected="selected">None</option>
    <option value="tid">tid</option>
    <option value="tid and acc">tid and acc</option>
    <option value="xid">xid</option>
</select>
<input id="tid-acc" />

http://jsfiddle.net/dbrecht/QwkKf/

Upvotes: 0

Related Questions