Save checkbox value to array and display result PHP, Jquery

Question

i need some help with my code,

When i click to checkbox, i want it post to a file php (check.php) and return data, check php will store data that i click to session array and return 1 if success, 0 if error. In index, it will show text like this: You choosed: A, B, C ...

This is result:

This is my HTML code:

<script language="JavaScript">
function chkallClick(o) {
var form = document.frmForm;
for (var i = 0; i < form.elements.length; i++) {
    if (form.elements[i].type == "checkbox" && form.elements[i].name!="chkall") {
        form.elements[i].checked = document.frmForm.chkall.checked;
    }
}
}
</script>

<form method="POST" name="frmForm" id="frmForm" enctype="multipart/form-data">
            <table>
                <tr>
                    <th width="2%"><input type="checkbox" name="chkall" onClick="chkallClick(this);"></th>
                </tr>
                <?php while ($rows = $result->fetch_assoc()) { ?>
                <tr>
                  <th><input type="checkbox" name="chk[]" value="<?php echo $rows['id'];?>"></th>
                </tr>
                <?php } ?>
            </table>
</form>

This is my check.php file

<?php
   if(success)
   {
      $_SESSION['arr']=$_POST['chk'];
      echo "1";
   }
   else
      echo "0";
?>

When i click checkbox, it post dynamically to check.php and return data

I used this: Checkbox Data Dynamically Save to Database on Click but not working.

Check.php is my idea, i want to show you my idea in this file, not exacly code.

I try to show you my idea, hope you can understand. Thank you!

Answer 1

If your dynamic send is not working. Try this.

   <script language="JavaScript">
     function chkallClick(o) {
     var form = document.frmForm;
     for (var i = 0; i < form.elements.length; i++) {
         if (form.elements[i].type == "checkbox" && form.elements[i].name!="chkall") {
             form.elements[i].checked = document.frmForm.chkall.checked;
         }
     }
     }
     </script>
     <form method="POST" name="frmForm" id="frmForm" enctype="multipart/form-data">
            <table>
                <tr>
                    <th width="2%"><input type="checkbox" name="chkall" onClick="chkallClick(this);"></th>
                </tr>
                <?php while ($rows = $result->fetch_assoc()) { ?>
            <tr>
              <th><input type="checkbox" name="chk[]" value="<?php echo $rows['id'];?>"></th>
            </tr>
            <?php } ?>
            </table>
      </form>

      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
$("input[type='checkbox']").on('click', function(){
      $.post('check.php', $( "#frmForm" ).serialize(), function(data){
          if(data == 1){
             alert('Data was saved in db!');
          }
      });
});
</script>

Needing little bit more code and text to understand what is not working and what you are trying to achieve

Answer 2

Change you form into something like this:

<form method="POST" name="frmForm" id="frmForm" enctype="multipart/form-data">
        <table>
            <tr>
                <th width="2%"><input type="checkbox" name="chkall" onClick="chkallClick(this);"></th>
            </tr>
            <?php while ($rows = $result->fetch_assoc()) { ?>
            <tr>
              <th>
                 <input type="checkbox" id='chk_<?=$rows['id']?>' value="<?php echo $rows['id'];?>" onClick="triggerCheck(this)">
                 <input type="hidden" id='hid_<?=$rows['id']?>' name="chk[]" value="<?php echo $rows['id'];?>">
              </th>
            </tr>
            <?php } ?>
        </table>
</form>
<script>
    function triggerCheck(el) {
        var elId = el.id;
        var elId = elId.substring(elId.lastIndexOf("_")+1,elId.length);
        if (el.checked) {
            document.getElementById('hid_'+elId).value=1;
        } else {
            document.getElementById('hid_'+elId).value=0;
        }

        var ajaxRequest;
        try {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {

            try {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(oc){
                ajaxRequest = null;
            }
        }

        if(!ajaxRequest && typeof XMLHttpRequest!=undefined)
            ajaxRequest = new XMLHttpRequest();

        var url = "check.php?";
        var arrCheck = document.getElementsByTagName("input");
        var param = "";
        for (var i = 0; i < arrCheck.length; i++) {
            var elcheck = arrCheck[i];
            if (elcheck.type == 'checkbox') {
                if (elcheck.id != null) {
                    if (elcheck.id.substring(0,3) == "chk") {
                       if (param.trim().length > 0) {
                           param += "&";
                       } 
                       if (elcheck.checked) {
                           param += "chk[]="+1;
                       } else {
                           param += "chk[]="+0;
                       }
                    }
                }
            }
        }
        if (param.trim().length > 0) {
            url = url + "?" + param;
        }
        ajaxRequest.open("GET", url);

        ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState!=4) return;

        // eval ajax response here
        var data = ajaxRequest.responseText;
        //
        try {
            eval(data);
        } catch (e) {
            console.log("Failed to eval data: " + data + " ("+e+")");
        }
    };
    ajaxRequest.send('');

</script>

If you means that you need to call a PHP on every checkbox click, please check my edited answer. I haven't tested it, but I think it should be something like this.