0

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 .

Isaac Bennetch
  • 11,830
  • 2
  • 32
  • 43
v2mpire 20202
  • 45
  • 6
  • 1
    Side note: the way you're building your query is unsafe. You're open to [SQL injection](https://stackoverflow.com/questions/332365/how-does-the-sql-injection-from-the-bobby-tables-xkcd-comic-work). You should use [prepared statements](https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php) or [PDO](https://www.php.net/manual/en/book.pdo) instead. – El_Vanja Nov 28 '20 at 10:50
  • it's just testing for now, I will keep it in mind , thank you. – v2mpire 20202 Nov 28 '20 at 11:03

1 Answers1

1

Your problem is the following line:

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

What's happening here is that you select all of your checkboxes ($(".catcf")) and then change their value attribute to the value of the clicked checkbox. Remove this line and it should work as expected.

El_Vanja
  • 3,660
  • 4
  • 18
  • 21
  • is there way i can remove Looding word after loaded .. – v2mpire 20202 Nov 28 '20 at 12:54
  • Remove it by setting the content to empty string in the `success` handler (`$(".main-area-courses-continer").html("")`). Also, it should be "Loading". – El_Vanja Nov 28 '20 at 13:02
  • perfect ,just after loading removing it's like progress bar i don't needed after the data come, thank you so much there another question i will publish hhhh, just if you have time to help I will be grateful to you. just affter i publich i will liv the link for you here . https://stackoverflow.com/questions/65050236/reverse-or-hide-jquery-ajax-for-input-checkbox-results – v2mpire 20202 Nov 28 '20 at 13:46