Save Checkbox State and Update Database

Question

Hello,

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

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 in 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.

Answer 1

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/

Answer 2

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!

Answer 3

Can't get the job done. I have followed wowo_999 tips and I have this:

$(document).ready(function(){
$("input").click( function() { 
     $("input").each(function() { 
         if (this.checked) {
            $(this).parent("div#event_row").css("background-color", "green");
            $(this).parent("div#event_row").css("color", "white");
            $(this).next("a").hide();
            $.ajax({
                type:'POST',
                url:'teste.php',
                data:({done: 1}),
                async:false,
                success:function(msg){
                    alert(msg);
                }
            }); 
            return true;
            }
         else {
            $(this).parent("div#event_row").css("background-color", "white");
            $(this).parent("div#event_row").css("color", "black");  
            $(this).next("a").show();
            $.ajax({
                type:'POST',
                url:'teste.php',
                data:({done: 0}),
                async:false,
                success:function(msg){
                    alert(msg);
                }
            });
            return true;        
            }
      });
  });

});

teste.php

include '../admin/dbconn.php';

$done = $_POST['done']; 

$sql = "UPDATE calendar_event SET realizada = '".$done."' where id = 117";

$query = mysql_query($sql) or die("Erro: ".mysql_error());

I've specified a specific id to try this.

When I check the checkbox it must do:

• Hide Edit/Remove Even Button (It Works)
• Turn that Div Green (It Works)
• Update DB field "realizada" with the specific value (0 or 1) (Doesn't Work)

Can anyone help me? Thank you.