selecting by multiply checkboxes from database by jquery ajax and php

Question

the code selecting only by single checkbox one by one, the result i am to looking for o get is when clicking or checkbox one geting result and when click second or third checkbox is submit all checkboxs once to the prosses page to get the result of all checkedboxs and refresh the display area

my jquery code :

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

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

    var catcf = Number($(this).val());
    
        $.ajax({
            url: 'processing.php',
            type: 'post',
            data: {catcf:catcf},
            beforeSend:function(){
                $(".block-courses").html("<div>Loading...</div>");
            },
            success: function(response){
                
                // Setting little delay while displaying new content
                setTimeout(function() {
                    // appending posts after last post with class="post"
                    $(".block-courses:last").after(response).show().fadeIn("slow");
                    $(".block-courses").html("");
            
                    
                }, 2000);


            }
        });
    


        }
                if ($('input.catcf').is(":not(:checked)")){
                    $( ".c"+Number($(this).val())).remove();
            }
            

           
    
    });

the selecting page

<input id="<?php echo $cat->category_id; ?>" type="checkbox" value="1" class="catcf" >
<input id="<?php echo $cat->category_id; ?>" type="checkbox" value="2" class="catcf" >
<input id="<?php echo $cat->category_id; ?>" type="checkbox" value="3" class="catcf" >
<input id="<?php echo $cat->category_id; ?>" type="checkbox" value="4" class="catcf" >
<div class="block-course">
//reault here
</dive

the processing.php page just to see the results

echo "<pre>";
print_r($_POST);
echo "</pre>";

El_Vanja · Accepted Answer · 2020-11-29 19:06:26Z

You are currently getting only the value of the checkbox that triggered the event:

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

If you need all of them, you'd have to fetch all checked inputs and get all of their values:

$(".catcf").on('click', function() {
    // this grabs all the checked inputs of given class
    $checkedInputs = $('input.catcf:checked');
    // this replaces your if ($('input.catcf').is(':checked')) {
    // no need to fetch again since now we already have those elements stored
    if ($checkedInputs.length > 0) {
        $.ajax({
            // other ajax props
            data: {
                // transform a list of jQuery objects to an array of their values
                catcf: $.map($checkedInputs, (input) => input.value),
            },
            // other ajax props
        });
    } else {
        // no checkboxes are clicked, remove whatever content you need
    }
});

To get all the values, I utilized jQuery map. It works like this:

The $.map() method applies a function to each item in an array or object and maps the results into a new array.

meaning our callback here takes a list of checkboxes and retrieves their value, placing them in an array, e.g. ["1", "2"].

Collectives™ on Stack Overflow

selecting by multiply checkboxes from database by jquery ajax and php

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related