PHP search using AJAX with checkbox

Question

How do I let AJAX know what I have checked with checkbox? I have a list of categories that are selected from a database. So how do let the AJAX know what I have checked?

This is my search PHP:

<div class ="search-category-container">
        <div class ="search-category-header featured-header">
            <label class ="featured-font">category</label>
        </div>
        <div class ="search-category-content">
                <?php 
                $result=mysqli_query($connection,"SELECT * FROM category");
                while($row=  mysqli_fetch_array($result)) { ?>
                <label class="checkbox category-list ">
                  <input type="checkbox" name="category_list[]" value="<?php echo $row['name']; ?>" form="search-form"><?php echo $row['name']; ?>
                </label>
                <?php
                }
                ?>
        </div>
    </div>

This is my search function using on search before without AJAX. Now I was trying to use AJAX to get data can I use back the function?

<?php
if($filter == "post" && $time == "all" && $status == "all" && isset ($_POST['category_list'])) {
foreach ($_POST['category_list'] as $category) {
    $result = mysqli_query($connection, "SELECT * FROM category WHERE name IN ('$category')")or die(mysqli_error($connection));
    while($row=  mysqli_fetch_array($result)) {
        $getCategory = $row['id'];
        $getPostIDRow = mysqli_query($connection, "SELECT * FROM post_category WHERE category_id = '$getCategory'") or die(mysqli_error($connection));
        while($row2=  mysqli_fetch_array($getPostIDRow)) {
            $getPostID = $row2['post_id'];
            $result2 = mysqli_query($connection,"SELECT * FROM post WHERE title LIKE '%$search%' AND id = '$getPostID'") or die(mysqli_error($connection));
            $count2 = mysqli_num_rows($result2);

if($count2>0) {
    while($row2= mysqli_fetch_array($result2)) {
        $postID = $row2['id'];
        $result3 = mysqli_query($connection, "SELECT * FROM user_post WHERE post_id = '$postID'") or die(mysqli_error($connection));
        while($row3 = mysqli_fetch_array($result3)) { 
            $getUserName = mysqli_query($connection, "SELECT * FROM user WHERE id = '".$row3['user_id']."'")or die(mysqli_error($connection));
            while($row4 = mysqli_fetch_array($getUserName)) {?>
                <div class ="post-container" id="search-container">
                    <div class ="post-header-container">
                        <div class ="post-header">
                            <a href ="post.php?id=<?php echo urlencode($row2['id']);?>&user=<?php echo $row3['user_id']; ?>">
                                <p class ="post-header-font"><?php echo ($row2['title']); ?></p>
                            </a>    
                        </div>
                        <div class ="post-user">
                            <p class ="faded-font">by : <a href="user.php?user=<?php echo $row3['user_id']; ?>"><?php echo $row4['username']; ?></a></p>
                        </div>
                    </div>
                    <div class ="post-content-container">
                        <p class ="post-content-font">
                            <?php echo ($row2['summary']); ?>
                        </p>
                    </div>
                    <div class ="post-info-container">
                        <div class ="post-info">
                            <span class ="glyphicon glyphicon-eye-open"> views: <?php echo ($row2['views']);?></span>
                        </div><div class ="post-info">
                            <span class ="glyphicon glyphicon-pencil"> answers:</span>
                        </div><div class ="post-info">
                            <span class ="glyphicon glyphicon-ok"> status: <?php echo ($row2['status']);?></span>
                        </div>
                    </div>
                </div><?php
                    }
                }
            }
        }
    }
}
}
?>

This is AJAX search function

    $(document).ready(function(){
function search() {
    var searchWord = $("#search").val();
    var filter = $("#filter:checked").val();
    var time = $("#time:checked").val();
    var status = $("#status:checked").val();
        $.ajax({
            type:"post",
            url:"searchFunction.php",
            data:"search="+searchWord+"&filter="+filter+"&time="+time+"&status="+status,
            success:function(data) {
                $("#searchContainer").html(data);
                $("#search").val("");
            }
        });
}
$("#searchButton").click(function(){
    search();
});
$("#search").keyup(function(e){
    if(e.keyCode == 13) {
        search();
    }
});
});

Answer 1

To answer you ajax question I highly recommend changing your code to use the 'form' DOM for user experience and easier maintenance, just fyi and use the serialize function which will also send out the 'checked' checkboxes.

https://api.jquery.com/serialize/

function search() {

   var postData = $('myForm').serialize(); // i.e <form id="myForm">
        $.ajax({
            type:"post",
            url:"searchFunction.php",
            data: postData,
            success:function(data) {
                $("#searchContainer").html(data);
                $("#search").val("");
            }
        });
}

That will do all the work for you automatically instead of having to run a bunch of jQuery selection calls and putting together the HTTP query your self. If you ever need to know what your ajax is running. Go in inspector mode of your browser and look for "Network" tab, click that and you should see the ajax call to that search file, with everything you need to know. What HTTP request and response headers are and body.

P.s make sure you return false on the submit event and that the name of the fields on your HTML form match the $_POST key names for the ajax.

$("#myForm").on('submit', function(){
    search();
    return false;
});

Good luck!