Javascript hide and show form not working

Question

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">

Joseph Marikle · Accepted Answer · 2011-09-08 21:46:27Z

2

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(); 
       }
    });
});

edited Sep 8, 2011 at 21:46

answered Sep 8, 2011 at 21:33

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joseph Marikle Over a year ago

@Spencer take a look at my edit to my question. also you can see it here

Demian Brecht · Accepted Answer · 2011-09-08 21:34:26Z

Couple problems:

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.
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/

Codeman · Accepted Answer · 2014-07-01 21:06:59Z

0

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(); 
       }
    });

edited Jul 1, 2014 at 21:06

Codeman

12.4k10 gold badges57 silver badges92 bronze badges

answered Sep 8, 2011 at 21:30

NakedBrunch

49.5k14 gold badges75 silver badges98 bronze badges

Collectives™ on Stack Overflow

Javascript hide and show form not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related