CODEWITHSUNDEEP
javascriptjqueryhtml
NWT_Bob
NWT_Bob

Reputation: 133

JS bug in PHP generated HTML

I've got some PHP code that generates a form ... but there are two hidden div sections on the page, one inside the other, that show or hide, based on answers selected.

The first question (which shows the second question if yes is selected) works great.

The second question, if they click on the "other" checkbox, then a text field is supposed to display to allow them to specify their answer.

Everything works except when you "uncheck" the other box, it's supposed to hide the text field ... and it doesn't. If I switch the first answer to No, then it correctly hides the second question ... and I can switch back and forth as much as I want without an issue ... but the "Other (specify)" question at the bottom isn't working.

It's probably something simple, and I'm guessing it's with the javascript ... but I can't seem to find it.

Here is my code:

<script type="text/javascript">
$(document).ready(function() {

  $("#Q39_div").toggle($("input[name=38]:checked").val() == 1);  

  $("input[name='38']").change(function(){
    $("#Q39_div").toggle($(this).val() == 1);
  });

  $("#Q56_div").toggle($("input[name=q56]:checked").val() == 1);  

  $("input[name='q56']").change(function(){
    $("#Q56_div").toggle($(this).val() == 1);
  });
});
</script>

<form name='frmSurvey' method='post' action='DoAction.php?action=Survey6'>
  <input type='hidden' name='direction' value='forward'/>
  <ul type="none" style='padding-left: 20px;'>
      Have you changed jobs <i>within the GNWT</i> in the past two years?
      <blockquote>
        <input type="radio" name="38" value="1" /> &nbsp;Yes<br>
        <input type="radio" name="38" value="2" /> &nbsp;No<br>
        <br/> <br/>
      </blockquote>
    <div id="Q39_div" style="width:75%; display:none;">  
    <table width="90%" cellpadding="3" cellspacing="0" border='1' class='SurveyTable'>
      <input type="hidden" name="q51" value="99" />
      <input type="checkbox" name="q51" value="1" />&nbsp;Blah blah blah<br />
      <input type="hidden" name="q52" value="99" />
      <input type="checkbox" name="q52" value="1" />&nbsp;More blah blah blah<br />
      <input type="hidden" name="q53" value="99" />
      <input type="checkbox" name="q53" value="1" />&nbsp;Some other blah blah blah<br />
      <input type="hidden" name="q54" value="99" />
      <input type="checkbox" name="q54" value="1" />&nbsp;Again blah blah blah<br />
      <input type="hidden" name="q55" value="99" />
      <input type="checkbox" name="q55" value="1" />&nbsp;Who cares blah blah blah<br />
      <input type="hidden" name="q56" value="99" />
      <input type="checkbox" name="q56" value="1" />&nbsp;Other (Specify)<br />
    </table>
    <div id="Q56_div">
      <input name="q56_text" value="" class="SpecifyBox" type="text" size="15" maxlength="50" />
    </div>
    </div><br>
  </ul>

Upvotes: 2

Views: 61

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

$(this).val() == 1 will always return true since the value stay '1' and it will never return false so never hide the input.

Use $(this).is(':checked') to show/hide depending to the checkbox state (checked or unchecked):

$("input[name='q56']").change(function(){
    $("#Q56_div").toggle($(this).is(':checked'));
});

Or just use $("#Q56_div").toggle(); directly without parameters, take a look to .toggle().

$("input[name='q56']").change(function(){
    $("#Q56_div").toggle();
});

Hope this helps.

$(document).ready(function() {

  $("#Q39_div").toggle($("input[name=38]:checked").val() == 1);  

  $("input[name='38']").change(function(){
    $("#Q39_div").toggle($(this).val() == 1);
  });

  $("#Q56_div").toggle($("input[name=q56]:checked").val() == 1);  

  $("input[name='q56']").change(function(){
    $("#Q56_div").toggle($(this).is(':checked'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='frmSurvey' method='post' action='DoAction.php?action=Survey6'>
  <input type='hidden' name='direction' value='forward'/>
  <ul type="none" style='padding-left: 20px;'>
    Have you changed jobs <i>within the GNWT</i> in the past two years?
    <blockquote>
      <input type="radio" name="38" value="1" /> &nbsp;Yes<br>
      <input type="radio" name="38" value="2" /> &nbsp;No<br>
      <br/> <br/>
    </blockquote>
    <div id="Q39_div" style="width:75%; display:none;">  
      <table width="90%" cellpadding="3" cellspacing="0" border='1' class='SurveyTable'>
        <input type="hidden" name="q51" value="99" />
        <input type="checkbox" name="q51" value="1" />&nbsp;Blah blah blah<br />
        <input type="hidden" name="q52" value="99" />
        <input type="checkbox" name="q52" value="1" />&nbsp;More blah blah blah<br />
        <input type="hidden" name="q53" value="99" />
        <input type="checkbox" name="q53" value="1" />&nbsp;Some other blah blah blah<br />
        <input type="hidden" name="q54" value="99" />
        <input type="checkbox" name="q54" value="1" />&nbsp;Again blah blah blah<br />
        <input type="hidden" name="q55" value="99" />
        <input type="checkbox" name="q55" value="1" />&nbsp;Who cares blah blah blah<br />
        <input type="hidden" name="q56" value="99" />
        <input type="checkbox" name="q56" value="1" />&nbsp;Other (Specify)<br />
      </table>
      <div id="Q56_div">
        <input name="q56_text" value="" class="SpecifyBox" type="text" size="15" maxlength="50" />
      </div>
    </div><br>
  </ul>
</form>

Upvotes: 1

Sami Kuhmonen
Sami Kuhmonen

Reputation: 31153

You are checking the value of the checkbox, which doesn't change when it's checked. You should check if it's checked

$("input[name='q56']").change(function(){
  $("#Q56_div").toggle(this.checked);
});

Upvotes: 1

Related Questions