a variable does not pass from javascript to php through ajax

Question

I think the issue was with the checkboxes set. Nonetheless, its working now. All the values being checked are passes properly and can be checked by uncommenting the lines in php code.

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<table>
<tr>
  <td>
    <span class="custom-checkbox">
    <input type="checkbox" class="checkbox" id="checkbox1" name="options1[]">
    <input type="checkbox" class="checkbox" id="checkbox2" name="options2[]">
    <input type="checkbox" class="checkbox" id="checkbox3" name="options3[]">
        <label for="checkbox1"></label>
    </span>
    <button class="button1">Submit</button>
  </td>
</tr>
</table>

<script type="text/javascript">
    $( document ).ready(function() {
        $( ".button1" ).click(function() {
            var val = [];

            //Fetch all checked values 
            $("input:checked").each(function (index,value) {
                val[index] = this.value;
            });
            
             
            var myJSONText = JSON.stringify(val);
            $.ajax({
                data: {'kvcArray': myJSONText},
                url: 'test.php',
                type: 'POST',
                success: function(result) {
                    alert(result);
                }
            });
        });
    });
</script>

</body>
</html>

PHP Code:

<?php
    //To Test the incoming values just uncomment these lines below.
    // print_r($_POST);
    // die();

    /*Check if form value is set*/ 
    if (isset($_POST['kvcArray'])) {
        // Pass the value to ajax success method
        echo $_POST['kvcArray'];
        die();
    }
    /*-------------------------*/ 
?>

Leave a Comment Cancel Reply