Home/ Questions/Q 6023653
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T04:02:13+00:00

So I have a to-do list of items that are dynamically populated by user

  • 0

So I have a to-do list of items that are dynamically populated by user input. Each has a checkbox next to it, when checked, the status of the to-do item in MySQL database should be modified.

I thought of doing it this way:

echo "<input type='checkbox' onclick='changeState($theid);' />";

where $theid is the row id in the table.

What would the javascript/jquery changeState() function look like to be able to update the database properly?

Here is the javascript code that seems to not work at all (it is placed in the <head> of the HTML file:

<script language="javascript">

function changeState()
{
    jQuery('body').delegate('input[type="checkbox"][data-state-id]', 'change', function(event){
    jQuery.post('updatedata.php', {
        'rowid': jQuery(this).attr('data-state-id')
        //'state': jQuery(this).is(':checked')
    });
});

}

</script>

any ideas why?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should read more about AJAX calls, preferably with .post() function, and then update the data in database on the server side.

    Good luck.

    Based on the examples from the documentation of jQuery’s .post(), you can implement something like this (in JavaScript with jQuery):

    var changeStatus = function(id){
    $.post("updateState.php", { 'id': id } );
};

    and on the server side (eg. in updateState.php):

    $id = (int)$_POST['id'];
// here make some query using $id to update the state
// in a manner you prefer

    EDIT:

    But I would prefer something like that:

    1) on server side, displaying the checkbox (notice different quotes and (int) cast):

    echo '<input type="checkbox" data-state-id="' . (int)$theid . '" />';

    2) somewhere in JavaScript (see jsfiddle as a proof):

    jQuery(main_container).delegate('input[type="checkbox"][data-state-id]', 'change', function(event){
    jQuery.post('update_state.php', {
        'id': jQuery(this).attr('data-state-id'),
        'state': jQuery(this).is(':checked')
    });
});

    3) somewhere on server side (in update_state.php):

    $id = (int)$_POST['id'];
$state = (bool)$_POST['state'];
$query = 'UPDATE `states` SET `state`="' . $state . '" WHERE `id`="' . $id . '";';
// here execute the query, obviously adjusted to your needs
    • 0