i have a code that should pass the value of all checked list to a php file , so as to delete the rows of a csv file . so the check box value is dynamic and i have to get all the value of checked checkbox , so i used javascript and this javascript will pass the value to

variable is not passing from javascript to php through ajax

i have a code that should pass the value of all checked list to a php file , so as to delete the rows of a csv file . so the check box value is dynamic

<tr><td><span class="custom-checkbox"><input type="checkbox" class="checkbox" id="checkbox"'+count+'" name="options[]" value="'+count+'"><label for="checkbox1"></label></span></td>';

JavaScript
​x
 
<tr><td><span class="custom-checkbox"><input type="checkbox" class="checkbox" id="checkbox"'+count+'" name="options[]" value="'+count+'"><label for="checkbox1"></label></span></td>';​

and i have to get all the value of checked checkbox , so i used javascript and this javascript will pass the value to PHP through ajax

<script type="text/javascript">
    $( document ).ready(function() {
        $( ".button1" ).click(function() {
            var val = [];
            $("input:checked").each(function (index,value) {
                    val[index] = this.value;
            });

            var myJSONText = JSON.stringify(val);
            $.ajax({
                data: {'kvcArray': myJSONText},
                url: 'Index.php',
                type: 'POST',
                success: function(result) {
                    // alert(data);
                }
            });
        });
    });
</script>

JavaScript
 
<script type="text/javascript">    $( document ).ready(function() {        $( ".button1" ).click(function() {            var val = [];            $("input:checked").each(function (index,value) {                    val[index] = this.value;            });​            var myJSONText = JSON.stringify(val);            $.ajax({                data: {'kvcArray': myJSONText},                url: 'Index.php',                type: 'POST',                success: function(result) {                    // alert(data);                }            });        });    });</script>​

so it has to pass the value to same page (Index.php) and PHP code is’

<?php
    if (isset($_POST['kvcArray'])) {
        echo "<pre>";
        echo "<script>console.log('Debug Objects' );</script>";
        var_dump(json_decode($_POST['kvcArray'], true));
        echo "</pre>";
        die();
    }
?>

JavaScript
 
<?php    if (isset($_POST['kvcArray'])) {        echo "<pre>";        echo "<script>console.log('Debug Objects' );</script>";        var_dump(json_decode($_POST['kvcArray'], true));        echo "</pre>";        die();    }?>​

but it is not posting the value . till Javascript code everything works fine ( i did an alert to check the data is fetched or not ) but the value is not getting posted in PHP ,

Answer

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>

JavaScript
 
<!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();
    }
    /*-------------------------*/ 
?>

JavaScript
 
<?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();    }    /*-------------------------*/ ?>​

Advertisement

Answer