Update value in MySQL via AJAX/PHP when a dynamically created checkbox is clicked?

Question

I am creating an admin panel for a project that I am working on. It will list a bunch of entries in a table and each row will have a checkbox in it. This checkbox will be used to activate an entry to be displayed on the website.

I am setting the id and name of the checkbox with data from the MySQL database. For example..

<input type="checkbox" class="active" name="active<?php echo $id; ?>" id="active<?php echo $id; ?>" <?php if ($active == 1): ?>checked="checked"<?php endif; ?> value="<?php echo $id; ?>">

For the entry with ID of 5 it will look like this..

<input type="checkbox" class="active" name="active5" id="active5" checked="checked" value="5">

I need to set this up so that when you check a box or uncheck it that it updates the "active" value in the database. How do I grab the value of each checkbox, when clicked, and send that value to the MySQL database. I can do this easily if I know the checkboxes name beforehand, but since the name is partly generated from the database I'm not sure how to write the code to determine which entry gets the active value.

Here is my jQuery..

$("input.active").click(function() {
// store the values from the form checkbox box, then send via ajax below
var check_active = $(this).is(':checked') ? 1 : 0;
var check_id = $(this).attr('value');

console.log(check_active);
console.log(check_id);

    $.ajax({
        type: "POST",
        url: "http://nowfoods.marketspacecom.com/nextstep/ajax.php",
        data: {id: check_id, active: check_active},
        success: function(){
            $('form#submit').hide(function(){$('div.success').fadeIn();});

        }
    });
return true;
});

Here is the PHP..

<?php

include("dbinfo.inc.php");
mysql_connect($server,$username,$password);
@mysql_select_db($database) or die( "Unable to select database"); 

// CLIENT INFORMATION
$active = mysql_real_escape_string($_POST['active']);
$id = mysql_real_escape_string($_POST['id']);

$addEntry = "UPDATE entries SET active = '$active' WHERE id = '$id'";
mysql_query($addEntry) or die(mysql_error());


mysql_close();

?>

Solution 1

You could add a class to the input and set the value to the id instead:

<input class="active" type="checkbox" name="active5" id="active5" value="5" checked="checked">

Then, change your jQuery:

$("input.active").click(function() {
// store the values from the form checkbox box, then send via ajax below
var check_active = $(this).is(':checked') ? 1 : 0;
var check_id = $(this).attr('value');

    $.ajax({
        type: "POST",
        url: "http://nowfoods.marketspacecom.com/nextstep/ajax.php",
        data: {id: check_id, active: check_active}
        success: function(){
            $('form#submit').hide(function(){$('div.success').fadeIn();});

        }
    });
return true;
});

As for PHP:

<?php

include("dbinfo.inc.php");
mysql_connect($server,$username,$password);
@mysql_select_db($database) or die( "Unable to select database"); 

// CLIENT INFORMATION
$active        = mysql_real_escape_string($_POST['active']);
$id = mysql_real_escape_string($_POST['id']);

// WHERE id=16 is just for testing purposes. Need to dynamically find which checkbox was checked and use that info to tell the query which ID to update. 
$addEntry  = "UPDATE entries SET active = '$active' WHERE id = '$id'";
mysql_query($addEntry) or die(mysql_error());

mysql_close();
?>

This should be what you're looking for. There may be some minor syntax issues, because I'm writing this off the top of my head, but I hope you get the general idea. :-)

Solution 2

This is wrong:

var active = $('#active').attr('value');

You need to check the clicked element and you have to check whether it is checked or not (the value doesn't really matter that much unless you use it to pass the ID):

var active = $(this).is(':checked');    // the checkbox is checked (boolean)

You can set it to an integer value like:

var active = $(this).is(':checked') ? 1 : 0;

Which is short for:

if ($(this).is(':checked')) {
  var active = 1;
} else {
  var active = 0;
}

And in php you need process you user input correctly:

$active = (int) $_POST['active'];

Edit: It seems you have a space that should not be there in your edited code, does it work when you set:

...
data: {"active=": check_active, "id": check_id},
...

Also, as both values are integers / should be integers, there is no real use escaping them for the database using a string function, you should test for integers or at the very least cast them to integers:

// CLIENT INFORMATION
$active = (int) $_POST['active'];
$id = (int) $_POST['id'];