CODEWITHSUNDEEP
phpjavascriptjquerymysql
Sev
Sev

Reputation: 15709

PHP and JavaScript Change Status in MySQL

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?

Upvotes: 0

Views: 2225

Answers (2)

Tadeck
Tadeck

Reputation: 137350

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

Upvotes: 2

MarioRicalde
MarioRicalde

Reputation: 9487

You don't need to think of this as: "JavaScript will update the SQL Record", think of this as "JavaScript will tell a API to update that id."

So basically what you have to do is make an API with PHP; and then make JavaScript do the correct API Call via $.ajax, that should do the trick.

$.ajax({
  url: '/path/to/api.php',
  type: 'POST',
  dataType: 'xml/html/script/json/jsonp',
  data: {param1: 'value1'},
  complete: function(xhr, textStatus) {
    //called when complete
  },
  success: function(data, textStatus, xhr) {
    //called when successful
  },
  error: function(xhr, textStatus, errorThrown) {
    //called when there is an error
  }
});

Upvotes: 1

Related Questions