PHP and JavaScript Change Status in MySQL

Question

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?

Any details about the MySQL table containing states to be changed? — Tadeck
– Tadeck, Commented Jun 8, 2011 at 22:48

Tadeck · Accepted Answer · 2011-06-08 23:09:38Z

2

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

edited Jun 8, 2011 at 23:09

answered Jun 8, 2011 at 22:39

Tadeck

138k28 gold badges155 silver badges201 bronze badges

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

5 Comments

Sev Over a year ago

except i guess it would be $_POST['id']...okay this looks interesting, going to try it now..

Tadeck Over a year ago

@Sev Yes, you are correct - I made a mistake. If you will follow the edited version, please keep in mind there may be some errors (maybe $state is reverted, I am not sure), but are some improvements, such as: 1) getting rid of inline JS, 2) delegating events, 3) using HTML5's custom data, 4) passing current state with the ID, 5) using onchange instead of onclick, 6) casting as protection from SQL Injection etc.

Tadeck Over a year ago

@Sev Regarding $state being reverted - I have checked it, it is not reverted (see jsfiddle), so you may wish to pass updated state along with the ID.

Sev Over a year ago

I just tried what you said...didn't work. I've updated my post above to the javascript code I'm using. Any ideas?

Tadeck Over a year ago

@Sev As I have proved with jsfiddle, my JS is working perfectly fine. You should not enclose this code within changeState() function. You should also get rid of onclick event in the <input> field. You should also check, where your request goes (eg. with Firebug in Firefox or Developer Tools in Google Chrome) - it probably goes to the wrong place (the URL in .post() was relative). Also this may be something on the server-side, with the query. Just fix the JS part and check, whether correct data goes to correct location.

MarioRicalde · Accepted Answer · 2011-06-08 22:39:28Z

1

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
  }
});

answered Jun 8, 2011 at 22:39

MarioRicalde

9,4876 gold badges43 silver badges42 bronze badges

Collectives™ on Stack Overflow

PHP and JavaScript Change Status in MySQL

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related