user10662573
user10662573

Reputation:

save and read the checkbox value in the db, change the status of the label

I have to use a checkbox as a preference choice, so I save it in a mysql db to have it always available. When I select the chekbox the label changes to Enabled and vice versa. When you save (submit) the page sends an allert message indicating the status of the checkbox, and save the new value in the db 0 = disabled 1 = enabled and "reload" the same page and read the new values. Now I have the problem that the scripts intervene before I can read the value from the db. Only when I reload the page the second time do I get the correct values. I inserted a page refresh but I did not solve the problem.

-js-

<script>
function checked() {

        if (document.getElementById("check1").checked){
            $(check1).siblings('label').html('Abled');
            alert("Abled Notify");
            $.get("birthdaysend.php");
        } else {
            $(check1).siblings('label').html('Disabled');
            alert("Disabled Notify");
        }
}
// function change label checked
$('#check1').click(function() {
  if ($(this).is(':checked')) {
    $(this).siblings('label').html('Abled');
  } else {
    $(this).siblings('label').html('Disabled');
  }
});

function urlCheck() {
if(window.location.href=="preference.php"){
    //load page = read satus
    checked();
 }
}
urlCheck()
</script>

-Insert in to db-

$dbox = "SELECT value FROM box WHERE id = '1'";
$dbox= $db->ExecuteScalar($dbox);
print_r($dbox);//temp

if (isset($_POST['check1']) && $_POST['check1'] == '1') {
    Execute("UPDATE box SET value='1' WHERE id = '1'");
    header("Refresh:0");
}else{
    Execute("UPDATE box SET value='0' WHERE id = '1'");
    //header("Refresh:0");
}

-Html-

<form name="preference" action="preference.php" method="POST">
<div class="col-sm-4"><label class="container" for="check1">Tag 1</label><input type="checkbox" class="checkmark" name="check1" id="check1" value="1" <?php echo ($dbox == 1 ? 'checked' : '');?>></div>
<button style="float:left; margin-left: 0px;" type="submit" class="btn btn-primary"><i class="fa fa-floppy-o"></i> Save </button>
</form>

Upvotes: 2

Views: 73

Answers (2)

Dr.Geek Nerd
Dr.Geek Nerd

Reputation: 97

A better way to do that would be with Ajax where the code to insert the value into a database is a different page from the one with a check box. Ajax is a JavaScript Library that has a synchronous ability.W3Schools tutorial for Ajax

Upvotes: 0

Blive
Blive

Reputation: 88

  1. First of all change this, make update code first and then select

    if (isset($_POST['check1']) && $_POST['check1'] == '1') {
        Execute("UPDATE box SET value='1' WHERE id = '1'");
    }else{
        Execute("UPDATE box SET value='0' WHERE id = '1'");
    }
    $dbox = "SELECT value FROM box WHERE id = '1'";
    $dbox= $db->ExecuteScalar($dbox);
    print_r($dbox);//temp
    
  2. Remove Urlcheck and checked functions from javascript

  3. In label add this code instead of tag 1

    echo ($dbox == 1 ? 'Abled' : 'Disabled');
    

Upvotes: 1

Related Questions