Variable not updating after selecting checkbox

Question

Ok, so I have a basic list of checkboxes as follows:

      <div class="control-group">
        <div class="controls">
          <label class="checkbox">
            <input type="checkbox" name="lowercase" id="lowercase" checked="true"> lowercase letters
          </label>
          <label class="checkbox">
            <input type="checkbox" name="uppercase" id="uppercase"> UPPERCASE LETTERS
          </label>
          <label class="checkbox">
            <input type="checkbox" name="digits" id="digits"> Digits 0 to 9
          </label>
          <label class="checkbox">
            <input type="checkbox" name="symbols" id="symbols"> Punctuation / Symbols <small>(e.g. % $ & * ! ... ) </small>
          </label>
          <label class="checkbox">
            <input type="checkbox" name="ascii" id="ascii"> All ASCII Characters
          </label>
        </div>
      </div>

When each of the checkboxes is checked the form it sits within submits via ajax to calc.php. Part of the calc uses a value I assign if the checkbox is checked or not, as follows:

if (isset($_POST['lowercase'])) {
        $numChars += 26;
    } 
    if (isset($_POST['uppercase'])) {
        $numChars += 26;
    }
    if (isset($_POST['digits'])) {
        $numChars += 10;
    }
    if (isset($_POST['symbols'])) {
        $numChars += 12;
    }
    if (isset($_POST['ascii'])) {
        $numChars = 96;
    }

So, as you'll see if a user selects more than one checkbox it adds up the respective values in the var numChars. If the user selects 'All ASCII' then the var should have a fixed value of 96 as this is the number of usable ascii chars i'm interested in. I use this code, found elsewhere on this forum, to remove checks from the other boxes if the 'ascii' box is ticked.

$(function () {
     var el = $('input:checkbox');
     el.on('change', function (e) {
         if ($(this).attr('id') != 'ascii') {
             if ($(this).is(':checked'))
                 $('#ascii').prop('checked', false);
             else {
                 var l = $(':checkbox')
                     .filter(':checked')
                     .not('#ascii').length;
                 if (l == 0)
                     $('#ascii').prop('checked', true);
             }
         } else {
             if ($(this).is(':checked'))
                 el.not($(this)).prop('checked', false);
         }
     });
 });

It all works fine. Except for one part. If I select 'lowercase' then numChars is 26. If I then select 'uppercase' then numChars rightly is 52. etc. If I select 'ascii' numChars goes to 96. But then if I select anything else, like 'uppercase' numChars remains at 96 despite the checkboxes updating on the screen. It only happens once I've selected 'ascii' so no matter what I press after it, it takes another click to update the value of numChars.

Hope this makes sense. I tried to make a jsfiddle but struggled with the ajax side of things despite reading the /echo/html examples.. :-)

What do you actually want? If ascii is checked then other option should not affect, isn't it? — zavg
– zavg, Commented Dec 16, 2013 at 11:57
yes that already works, so if ascii is selected then numChars is 96. But if after selecting ascii I change my mind and select 'lowercase' or whatever, numChars stays at 96 for some reason until I click again — user2672288
– user2672288, Commented Dec 16, 2013 at 11:59
so, you are expecting 96+26 or 26 alone when select lowecase after slecting all ascii? — Kumar V
– Kumar V, Commented Dec 16, 2013 at 12:00

Funk Forty Niner · Accepted Answer · 2013-12-16 13:40:25Z

1

As per your requirement, you have to change your action code to:

$numChars = 0;

if (isset($_POST['ascii'])) {

    $numChars = 96;
}

else

{

   if (isset($_POST['lowercase'])) {

      $numChars += 26;

   }

   if (isset($_POST['uppercase'])) {

      $numChars += 26;

   }

   if (isset($_POST['digits'])) {

      $numChars += 10;

   }

   if (isset($_POST['symbols'])) {

      $numChars += 12;

    }

}

edited Dec 16, 2013 at 13:40

Funk Forty Niner

74.2k14 gold badges71 silver badges146 bronze badges

answered Dec 16, 2013 at 12:15

Kumar V

8,8289 gold badges44 silver badges60 bronze badges

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

1 Comment

user2672288 Over a year ago

Thanks kumar_v but this didnt resolve to be honest. Perhaps its something else in my code, I'll try and setup a fiddle

user2672288 · Accepted Answer · 2013-12-16 14:02:37Z

Got it!!

Can't believe it was this simple ... aren't they all.

I had this code:

  // submit the form when boxes ticked
  $(':checkbox').change (function () {
    $("#pForm").submit();
  });

above the function:

$(function(){
var el = $('input:checkbox');
el.on('change', function(e){
  if($(this).attr('id')!='ascii')
  {
    if($(this).is(':checked')) 
        $('#ascii').prop('checked', false);
    else
    {
      var l = $(':checkbox')
          .filter(':checked')
          .not('#ascii').length;
      if (l == 0) 
        $('#ascii').prop('checked', true);
    }
  }
  else
  {
    if ($(this).is(':checked'))
      el.not($(this)).prop('checked', false);
  }
});

});

moving it underneath made the difference!

Collectives™ on Stack Overflow

Variable not updating after selecting checkbox

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related