Save Checkbox State and Update Database

I am stucked with an idea I want to implement into one of my projects, and I need some help from the best. :)

What I have

Even Not done! http://img299.imageshack.us/img299/4142/screenshot20100727at185.png

Event Done http://img180.imageshack.us/img180/4142/screenshot20100727at185.png

In the first image I pull some info from my DB and display that info and also a button do Edit/Remove that Even and a Checkbox that should be checked i开发者_开发技巧n case of the Event is finished/done.

In the second image, when the checkbox is checked that div turn green and the button goes away (hidden).

What I want

It's a bit hard to explain, but i'll try my best.

When an user checks that checkbox, It will update the field "done" in the DB of that Event with the value 1.

After this, every time I check these events, they should save their state (if it's done or not). They should keep just like the second image if the field "done" in the DB is 1.

Question

How can I accomplish this? Can someone give me some tips?

Much appreciated.

Regards.

You need to initiate the ajax call as stated above to update the database value to done:

$.ajax({
    url:'script_to_update_db',
    data:({done:'true'}),
    async:false,
    success:function(msg){
        alert(msg);
    }
});

Then, when the page is loaded, you need to check if the done value is set in the database, if it is, trigger your function that removes the button and makes the div turn green. How you do all of this really depends on how your code is set up. Good Luck!

Sounds like you want to fire off an ajax request to your server to tell it to update the database. I would check out jQuery's excellent ajax library. http://api.jquery.com/category/ajax/ You could also use jquery's change event handler to trigger the ajax request http://api.jquery.com/change/