John Davidson

Message:

my Code not working Exactly as I need, 2 pages php and 1 jquery file to get the data by jquery Ajax.
First Page name catfd.php :

 <input type="checkbox" value="2" class="catcf"> catfd2 <br />

 <input type="checkbox" value="35" class="catcf"> catfd35 <br />

 <input type="checkbox" value="22" class="catcf"> catfd22 <br />

 <input type="checkbox" value="133" class="catcf"> catfd133 <br />

 <input type="checkbox" value="28" class="catcf"> catfd28 <br />

 <input type="checkbox" value="33" class="catcf"> catfd33 <br />

 <input type="checkbox" value="55" class="catcf"> catfd55 <br />

 <input type="checkbox" value="44" class="catcf"> catfd44 <br />

and the second page name getvalue.php
this page it's given me the right answer if var '$catcfid' is Exactly one I choose from input filed in catfd.php ( i think my problem with Jquery ajax

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

$catcfid= $_POST['catcf'];

$sql = 'SELECT * FROM tablename  where cat_id = '.$catcfid.' order by p_id asc';

$catandproid = $wpdb->get_results($sql);

foreach($catandproid as $key){

    echo $key->title;

}



}

this is the jquery ajax file

$(document).ready(function(){

    $(".catcf").on('click', function() {



        if ($('input.catcf').is(':checked')) {        



              

        var catcf = Number($(this).val());

        

            $(".catcf").val(catcf);



            $.ajax({

                url: 'getvalue.php',

                type: 'post',

                data: {catcf:catcf},

                beforeSend:function(){

                    $(".main-area-courses-continer").html("Looding....");

                },

                success: function(response){



                    // Setting little delay while displaying new content

                    setTimeout(function() {

                        // appending posts after last post with class="post"

                        $(".main-area-courses-continer:last").after(response).show().fadeIn("slow");



                

                        

                    }, 2000);





                }

            });

        





            }

        });





});

the code is working but the result gives to me is repeating the first checkbox value I choose its mean jquery didn't change the value of class="catcf" because there unic value for each class. and I will use multiple choices from the checkbox.
i want use this checkbox to get different result from database .

---

My Answer:
To fix the issue of repeating the first checkbox value, you can modify your jQuery code to send an array of selected checkbox values to the PHP script. Here's how you can do it:

1. Modify your HTML checkboxes to have the same name attribute and add square brackets to make them an array:
html
catfd2

catfd35

catfd22

catfd133

catfd28

catfd33

catfd55

catfd44



2. Modify your jQuery code to collect all selected checkbox values into an array and send it to the PHP script:
javascript
$(document).ready(function(){
$(".catcf").on('click', function() {
var selectedValues = [];
$(".catcf:checked").each(function() {
selectedValues.push($(this).val());
});

$.ajax({
url: 'getvalue.php',
type: 'post',
data: {catcf: selectedValues},
beforeSend:function(){
$(".main-area-courses-continer").html("Loading....");
},
success: function(response){
// Setting little delay while displaying new content
setTimeout(function() {
// appending posts after last post with class="post"
$(".main-area-courses-continer:last").after(response).show().fadeIn("slow");
}, 2000);
}
});
});
});


3. Modify your PHP script to handle an array of selected checkbox values:
php
if(isset($_POST['catcf'])){
$catcfids = $_POST['catcf'];
$catcfids = implode(',', $catcfids);
$sql = 'SELECT * FROM tablename where cat_id IN ('.$catcfids.') order by p_id asc';
$catandproid = $wpdb->get_results($sql);
foreach($catandproid as $key){
echo $key->title;
}
}


With these changes, your jQuery code will collect all selected checkbox values into an array and send it to the PHP script. The PHP script will then query the database for all selected values and return the results accordingly.