title: How to update database value based on checkbox? Jquery/php/ajax
body: <p>Been trying for hours trying to figure this out but not getting anywhere.</p>
  
  <p>I am using labels as a checkbox. On check a checkbox, I would like the value of the database to be updated to 1. If the user unchecks the checkbox, I would like the value in the database to be update to 0.</p>
  
  <p>This is the page:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
   &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;Territory&lt;/title&gt;
            &lt;meta charset="UTF-8"&gt;
            &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
            
            &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;?php
  require_once 'config.php';
  $sql = "SELECT id, address, suburb, lat, lng, date, time FROM addresses";
  $result = $conn-&gt;query($sql);
       
       
  echo '&lt;table style="margin:0 auto; max-width:320px;"&gt;
  &lt;tr&gt;
  
  &lt;/tr&gt;';
  
  
  
  if ($result-&gt;num_rows &gt; 0) {
      // output data of each row
      while($row = $result-&gt;fetch_assoc()) {
      
      echo '&lt;tr&gt;
  
        &lt;td&gt;&lt;span style="font-weight:bold;"&gt;'.$row["address"].' '. $row["suburb"].'&lt;/span&gt; &lt;button style="float:right;" type="button"&gt;Go&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  
  
      &lt;div class="row"&gt;
          &lt;input type="checkbox" name="id" id="home['. $row["id"].']" value="1"/&gt;
          &lt;label class="label" for="home['. $row["id"].']" id="home['. $row["id"].']"&gt;&lt;/label&gt;
       
       &lt;span id="dropdown"&gt;
          &lt;select class="dropdown1" name="nhd1" id="'. $row["id"].'" &gt;
            &lt;option&gt;&lt;/option&gt;
            &lt;option&gt;Mon&lt;/option&gt;
            &lt;option&gt;Tue&lt;/option&gt;
            &lt;option&gt;Wed&lt;/option&gt;
            &lt;option&gt;Thu&lt;/option&gt;
            &lt;option&gt;Fri&lt;/option&gt;
            &lt;option&gt;Sat&lt;/option&gt;
            &lt;option&gt;Sun&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;select class="dropdown2" name="nht1" id="'. $row["id"].'" &gt;
            &lt;option&gt;&lt;/option&gt;
            &lt;option&gt;8:00am&lt;/option&gt;
            &lt;option&gt;8:30am&lt;/option&gt;
            &lt;option&gt;9:00am&lt;/option&gt;
            &lt;option&gt;9:30am&lt;/option&gt;
            &lt;option&gt;10:00am&lt;/option&gt;
            &lt;option&gt;10:30am&lt;/option&gt;
            &lt;option&gt;11:00am&lt;/option&gt;
            &lt;option&gt;11:30am&lt;/option&gt;
            &lt;option&gt;12:00pm&lt;/option&gt;
            &lt;option&gt;12:30pm&lt;/option&gt;
            &lt;option&gt;1:00pm&lt;/option&gt;
            &lt;option&gt;1:30pm&lt;/option&gt;
            &lt;option&gt;2:00pm&lt;/option&gt;
            &lt;option&gt;2:30pm&lt;/option&gt;
            &lt;option&gt;3:00pm&lt;/option&gt;
            &lt;option&gt;3:30pm&lt;/option&gt;
            &lt;option&gt;4:00pm&lt;/option&gt;
            &lt;option&gt;4:30pm&lt;/option&gt;
            &lt;option&gt;5:00pm&lt;/option&gt;
            &lt;option&gt;5:30pm&lt;/option&gt;
            &lt;option&gt;6:00pm&lt;/option&gt;
            &lt;option&gt;6:30pm&lt;/option&gt;
            &lt;option&gt;7:00pm&lt;/option&gt;
            &lt;option&gt;7:30pm&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;select class="dropdown1" name="nhd2" id="'. $row["id"].'" &gt;
            &lt;option&gt;&lt;/option&gt;
            &lt;option&gt;Mon&lt;/option&gt;
            &lt;option&gt;Tue&lt;/option&gt;
            &lt;option&gt;Wed&lt;/option&gt;
            &lt;option&gt;Thu&lt;/option&gt;
            &lt;option&gt;Fri&lt;/option&gt;
            &lt;option&gt;Sat&lt;/option&gt;
            &lt;option&gt;Sun&lt;/option&gt;
          &lt;/select&gt;
  
  
          &lt;select class="dropdown2" name="nht2" id="'. $row["id"].'" &gt;
            &lt;option&gt;&lt;/option&gt;
            &lt;option&gt;8:00am&lt;/option&gt;
            &lt;option&gt;8:30am&lt;/option&gt;
            &lt;option&gt;9:00am&lt;/option&gt;
            &lt;option&gt;9:30am&lt;/option&gt;
            &lt;option&gt;10:00am&lt;/option&gt;
            &lt;option&gt;10:30am&lt;/option&gt;
            &lt;option&gt;11:00am&lt;/option&gt;
            &lt;option&gt;11:30am&lt;/option&gt;
            &lt;option&gt;12:00pm&lt;/option&gt;
            &lt;option&gt;12:30pm&lt;/option&gt;
            &lt;option&gt;1:00pm&lt;/option&gt;
            &lt;option&gt;1:30pm&lt;/option&gt;
            &lt;option&gt;2:00pm&lt;/option&gt;
            &lt;option&gt;2:30pm&lt;/option&gt;
            &lt;option&gt;3:00pm&lt;/option&gt;
            &lt;option&gt;3:30pm&lt;/option&gt;
            &lt;option&gt;4:00pm&lt;/option&gt;
            &lt;option&gt;4:30pm&lt;/option&gt;
            &lt;option&gt;5:00pm&lt;/option&gt;
            &lt;option&gt;5:30pm&lt;/option&gt;
            &lt;option&gt;6:00pm&lt;/option&gt;
            &lt;option&gt;6:30pm&lt;/option&gt;
            &lt;option&gt;7:00pm&lt;/option&gt;
            &lt;option&gt;7:30pm&lt;/option&gt;
          &lt;/select&gt;
          &lt;/span&gt;
  &lt;/div&gt;
          &lt;input style="width:98.5%; margin-top:5px;" type="text" name="notes" placeholder="Add note"&gt;
          &lt;br&gt;&lt;br&gt;
        &lt;/td&gt;
        &lt;td&gt;
  
        &lt;/td&gt;
  
  
      &lt;/tr&gt;';
  echo '&lt;/div&gt;';
      }
  
  } else {
      echo "0 results";
  }
  echo '&lt;/table&gt;';
  
  $conn-&gt;close();
  
  ?&gt;
  
  &lt;script&gt;
  
  $(document).ready(function(){
     $('input[type="checkbox"]').click(function(){
          var home = 0;
  
         if ($('input[type="checkbox"]').is(":checked")) {
              var home = 1;
         }
  
          var id = $(this).val();
          $.ajax({
               url:"updateaddress.php",
               method:"POST",
               data:{home:home,id:id,},
              success: function(data){
                  alert(data);
              },
         });
  
     });
  });
  
  
  $(document).ready(function(){
    $('select[name=nhd1]').change(function(){
          var nhd1 = $(this).val();
          var id = $(this).attr('id');
          $.ajax({
              url:"updateaddress.php",
              method:"POST",
              data:{nhd1:nhd1,id:id,},
            });
          });
        });
  
  
  $(document).ready(function(){
    $('select[name=nhd2]').change(function(){
          var nhd2 = $(this).val();
          var id = $(this).attr('id');
          $.ajax({
              url:"updateaddress.php",
              method:"POST",
              data:{nhd2:nhd2,id:id,},
            });
          });
        });
  
  //learn to refresh page just in case more than one group working on map
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>      echo '&lt;tr&gt;
  
        &lt;td&gt;&lt;span style="font-weight:bold;"&gt;'.$row["address"].' '. $row["suburb"].'&lt;/span&gt; &lt;button style="float:right;" type="button"&gt;Go&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  
  
      &lt;div class="row"&gt;
          &lt;input type="checkbox" name="home['. $row["id"].']" id="home['. $row["id"].']" value="1"/&gt;
          &lt;label class="label" for="home['. $row["id"].']" id="home['. $row["id"].']"&gt;&lt;/label&gt;
  
      &lt;/div&gt;
          &lt;input style="width:98.5%; margin-top:5px;" type="text" name="notes" placeholder="Add note"&gt;
          &lt;br&gt;&lt;br&gt;
        &lt;/td&gt;
        &lt;td&gt;
  
        &lt;/td&gt;
  
  
      &lt;/tr&gt;';
  echo '&lt;/div&gt;';
  
  
  &lt;script&gt;
  
  $(document).ready(function(){
     $('input[type="checkbox"]').click(function(){
  
         if ($('input[type="checkbox"]').is(":checked")) {
             var home = 1;
             var id = $(this).attr('id');
          $.ajax({
               url:"updateaddress.php",
               method:"POST",
               data:{home:home,id:id,},
         }
  
          });
     });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the query:</p>
  
  <pre><code>&lt;?php
  // Include config file
  require_once 'config.php';
  
  $id = mysqli_real_escape_string($conn, $_POST['id']);
  $home = mysqli_real_escape_string($conn, $_POST['home']);
  $nhd1 = mysqli_real_escape_string($conn, $_POST['nhd1']);
  $nht1 = mysqli_real_escape_string($conn, $_POST['nht1']);
  $nhd2 = mysqli_real_escape_string($conn, $_POST['nhd2']);
  $nht1 = mysqli_real_escape_string($conn, $_POST['nht2']);
  
  if(isset($_POST["home"])) {
    $sql = "UPDATE addresses SET home='$home' WHERE id=$id";
    if($conn-&gt;query($sql) === TRUE){
  
      } else {
        echo "error" . $sql . "&lt;br&gt;".$conn-&gt;error;
      }
    }
  </code></pre>