JS bug in PHP generated HTML

Question

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>

Toggle does NOT have a parameter like you are using. Toggle is supposed to change visibility back and fourth based on the last set. api.jquery.com/toggle — Marco
– Marco, Commented Oct 19, 2016 at 18:01
Oh i missed that last one, sorry, still think it's not a good idea to use toggle(), I would rather use .show() and .hide(). I was looking the code, the checkbox ALWAYS have val, so you do not want to use it, you need to check dynamic checked state of the object. Checked or not, the input always has value... — Marco
– Marco, Commented Oct 19, 2016 at 18:06
Thanks all. I put in .is(':checked') (which is nicely self documenting code) and it works great. — NWT_Bob
– NWT_Bob, Commented Oct 19, 2016 at 18:56

Zakaria Acharki · Accepted Answer · 2016-10-19 18:11:54Z

$(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>

Change to .show() or .hide() based on the expressions (like $("input[name=38]:checked").val() == 1).
Thanks for your intervention.. I prefer $("#Q56_div").toggle($(this).is(':checked')); (updated my answer)

Sami Kuhmonen · Accepted Answer · 2016-10-19 17:56:26Z

1

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

answered Oct 19, 2016 at 17:56

Sami Kuhmonen

31.4k9 gold badges67 silver badges81 bronze badges

Collectives™ on Stack Overflow

JS bug in PHP generated HTML

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related