How to insert data into db using checkbox using ajax and php without form

Question

I have a checkbox when checked on it i want to enter the value of the checkbox into the database.Please help me to find the Ajax and php code for this. I tried this

    $(document).on('click', "input[type='checkbox']", function() {
    var checkbox = $(this);
    var checked = checkbox.attr('checked');
    $.ajax({
        url:"<?php echo base_url("contact-details-availability"); ?>",
        type: 'post',
        data: {
            action: 'checkbox-select', 
            id: checkbox.attr('contact_avl'), 
            checked: checked
              },
        success: function(data) {
            //alert(data);
        },
        error: function(data) {
           // alert(data);
            // Revert
            checkbox.attr('checked', !checked);
        }
    });
});

and

public function add_contact_details_availability()
{
    if($_POST['action'] == 'checkbox-select') {
         $checkbox = $_POST['id'];
         $checked = $_POST['checked'];
        // Your MySQL code here
        echo 'Updated';
    }
           echo 'Code ran';
}

But it won't works

the value doesn't pass and showing error undefined index id and checked — Ann
– Ann, Commented Oct 7, 2015 at 4:40
in ajax, var_dump($_POST); you ll see what all values have posted. — Niranjan N Raju
– Niranjan N Raju, Commented Oct 7, 2015 at 4:43
Try change event in place of click, one more thing replace checked to any other because there is one attribute with same name. Let me know. — Kausha Mehta
– Kausha Mehta, Commented Oct 7, 2015 at 4:45

Suyog · Accepted Answer · 2015-10-07 05:09:45Z

2

Here is the working JQuery

<script>
        $(document).on("change", "input[name='chk']", function () {
            var checkbox = $(this);
            var checked = checkbox.prop('checked');
            $.ajax({
                url:"<?php echo base_url("contact-details-availability"); ?>",
                type: 'post',
                data: {
                    action: 'checkbox-select', 
                    id: checkbox.data('contact_avl'), 
                    checked: checked
                      },
                success: function(data) {
                    //alert(data);
                },
                error: function(data) {
                   // alert(data);
                    // Revert
                    checkbox.attr('checked', !checked);
                }
            });
        });
    </script>

HTML

<input type="checkbox" name="chk" id="chk" data-contact_avl="val" value="1">check

I am saying it as working because all the three values are passing. Changes done to fix are:

1] changed var checked = checkbox.attr('checked'); to var checked = checkbox.prop('checked');

2] changed id: checkbox.attr('contact_avl') to id: checkbox.data('contact_avl')

3] changed onclick to onchange

answered Oct 7, 2015 at 5:09

Suyog

2,4811 gold badge16 silver badges27 bronze badges

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

2 Comments

Ann Over a year ago

i have one more doubt once we checked the checkbox it remains checked after refreshing the page.How it possible??

Suyog Over a year ago

Most of the time its because browser's behavior. Read mode about it on this link: stackoverflow.com/questions/3176155/… and get solution for this on following link: stackoverflow.com/questions/10954839/…

Nishanth Matha · Accepted Answer · 2015-10-07 04:42:55Z

0

try this:

var id = checkbox.attr('contact_avl'),
$.ajax({
        url:"<?php echo base_url("contact-details-availability"); ?>",
        type: 'post',
        data: {
            action: 'checkbox-select', 
            id: id, 
            checked: 'checked'
              },
        success: function(data) {
            //alert(data);
        },
        error: function(data) {
           // alert(data);
            // Revert
            checkbox.attr('checked', !checked);
        }
    });

answered Oct 7, 2015 at 4:42

Nishanth Matha

6,0892 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to insert data into db using checkbox using ajax and php without form

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related