How to update a mysql field when a checkbox status changes? using jquery (ajax), php and mysql

Question

I'm new to jquery and ajax and I'm having trouble doing this...

I have a php webpage that builds a table with values from a mysql table. The rows are "messages" and the last field of the row is a boolean field "read" that states if the message has been read or not.

Building the table, I transformed the boolean value to a checkbox to be "checked" or "unchecked", either the value is 1 or 0.

What I want to do is to connect this checkbox to an ajax event, using jquery, that if the checkbox status changes (if it's clicked), then it sends two values (status of the checkbox when the table was first loaded, and the message id) to another php file.

On this other php file I would update the status "read" of that particular message on my mysql table.

Can you give me any lights on how to do this? The php part I can handle but I don't know what jquery/ajax functions to build and how to call them on the html part of the checkbox...

Thanks

Phil Rykoff · Accepted Answer · 2010-03-03 01:01:36Z

1

The following code will add an event handler to the checkbox with id #checkboxId. The handler will either call test.php?checked=0 or checked=1, depending on the current checkbox status (unchecked/checked)

edit: here you have a full blown example for the client side. from php, you have to echo the message ids as the checkboxes value. this is then returned to server as param msgId. Now supporting multiple checkboxes with class filtering. You can change the class and parameter names, of course.

<html>
<head>
<title>Checkbox test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

</head>
<body>

<input type="checkbox" class="messageActivated" value="msg0">
<input type="checkbox" class="messageActivated" value="msg1">
<input type="checkbox" class="messageActivated" value="msg2">

</body>

<script type="text/javascript">
$(".messageActivated").bind('click', function() { 
    if($(this).attr('checked'))
    {
        $.get("store.php", { checked: 1, msgId: $(this).attr('value') } );
    }
    else
    {
        $.get("store.php", { checked: 0, msgId: $(this).attr('value') } );
    }
});
</script>
</html>

edited Mar 3, 2010 at 1:01

answered Mar 3, 2010 at 0:44

Phil Rykoff

12.1k3 gold badges41 silver badges64 bronze badges

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

2 Comments

Metraton Over a year ago

Thanks henchman. Just a few doubts... With that code, how can I pass the message_id to the test.php file? And other doubt... how do I call that function on this html part <input type="checkbox" name="checkboxId" value="checkboxId"> ?

Phil Rykoff Over a year ago

the function is called automatically, because by usind "$(".messageActivated").bind('click', ", you add an event handler to each checkbox. Problem with passing the message id has been solved in the current version... somebody doesn't like me ;((

Collectives™ on Stack Overflow

How to update a mysql field when a checkbox status changes? using jquery (ajax), php and mysql

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related