send checkbox value with ajax call

Question

I need to send the values of the checkboxes in a page to a php page that will process this data and return a response in a <div> called result. This must get a response everytime a checkbox is checked or unchecked so the ajax call should work "live" for all the checkboxes in the page. I've tried all the examples found on SO, but without success so there must be something wrong in what I'm doing but I'm unable to find what.

This is one of the checkbox (all the checkboxes are similar)

echo "<input type='checkbox' id='model' class='model' value='" . $row["model"] . "'>" . $row["model"] . "<br>";

The following is the jquery I've tried

$("checkbox").click(function() {
   if(this.checked){
        $.ajax({
            type: "POST",
            url: 'pfinder.php',
            data: $(this).attr('value'), 
            success: function(data) {
                $("#result").load(result);
        },
        });

    }
};

I've also tried to use just the id of a single checkbox, just to test, but unsuccessfully

$("#model").click(function() {
       if(this.checked){
            $.ajax({
                type: "POST",
                url: 'pfinder.php',
                data: $(this).attr('value'), 
                success: function(data) {
                    $("#result").load(result);
                },
                });

            }
    };

And the following is pfinder.php that process the data

$model = $_POST["model"];
echo $model;

very basic, but so far, no data is showed in the <div id='result'> Any advice?

yes, the checkbox is generated in a while cycle that reads the data from a mysql db — ZRep
– ZRep, Commented Jun 25, 2019 at 6:16

Syed mohamed aladeen · Accepted Answer · 2019-06-24 07:41:13Z

1

Instead of this.checked try $(this).prop("checked").

and change $(this).attr('value') to $(this).val()

$(".model").click(function() {
   if($(this).prop("checked")){
        $.ajax({
            type: "POST",
            url: 'pfinder.php',
            data: $(this).val(), 
            success: function(data) {
                $("#result").load(result);
        },
        });

    }
};

edited Jun 24, 2019 at 7:41

answered Jun 24, 2019 at 7:21

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ZRep Over a year ago

thank you for the answer, but unfortunately still not results. For entirety of information, the checkboxes are included in a form with post method. Do I have to add an id or a class to the form or it doesn't matter?

ZRep Over a year ago

unfortunately it is still not working. I've added a ) after the last } because it was missing, but the div is still empty. I've also tried to further simplify my code, removing all the php and creating the checkbox with HTML only, and I've tried to insert the checkbox in a form, but still nothing. Any other advice?

Sheikh Muzammil Askari · Accepted Answer · 2019-06-24 08:17:00Z

I think you want to send the value of checkbox, if checkbox is checked and in case if checkbox is not checked you want to send 0. So here is the code which might be useful for you

$(document).on("change", ".model", function () {

    let c = this.checked ? this.value : '0'; // $(this).val()

    if(c){

      //check if it alerts when check box is checked

      alert('checkbox is checked');

      // perform your ajax here
      $.ajax({
        type: "POST",
        url: 'pfinder.php',
        data: $(this).val(), 
        success: function(data) {
            //check if ajax is completed of no
            alert('ajax completed');
            $("#result").load(result);
         },
      });

    }else{

      //check if it alerts when check box is unchecked
      alert('checkbox is NOT checked');
    }

});

Collectives™ on Stack Overflow

send checkbox value with ajax call

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related