checkbox return error Uncaught RangeError: Maximum call stack size exceeded on change

Question

Im trying to update chckbox value in Mysql DB but im stuck with this error:

Uncaught RangeError: Maximum call stack size exceeded

Html:

<input type="checkbox" data-id="<?php echo $row['id']; ?>" name="product_edit_active_control" id="product_edit_active_control" value='' />

Javascript:

$(document).ready(function() {
         $("#product_edit_active_control").on("change", function() {
              var id    = $(this).attr("data-id");
              var activ = $(this).val();
                  if ($(this).is(":checked"))
                 {
                    var activ = $(this).val(1);
                  } else {
                    var activ = $(this).val(0);
                  }
                   $.post("inc/sql/produse/activare-produs.php", {
                     id:id, 
                     product_edit_active_control:activ

               },  function(data) {

                     $.toast({
                    heading: 'Success',
                    text: 'MODIFICATION SUCCESS! ',
                    showHideTransition: 'slide',
                    icon: 'success',
                    loaderBg: '#fff',
                    hideAfter: 1300,
                    position: 'top-right'
                })

             });
         });
     });

Radu Diță Radu Diță · Accepted Answer · 2020-04-17T14:06:04

You are updating the checkbox value from inside the change handler.

This in turn will trigger another update, which will call your method again.

And you'll update the value again. This is why you're getting stackoverflow. These are the offending lines.

if ($(this).is(":checked"))
{
  var activ = $(this).val(1);
} else {
  var activ = $(this).val(0);
}

It is not clear why you are updating the checkbox, I'm guessing that you don't need that at all.

checkbox return error Uncaught RangeError: Maximum call stack size exceeded on change

1 Answers