title: Update MySQL Value with checkbox
body: <p>I currently have the code below (it's a mix of css and html) for toggles. Ultimately the user can toggle for a value in the database to change from 0 to 1. However, I don't know how to do this without a submit button. </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.onoffswitch {
      position: relative; width: 45px;
      -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
  }
  .onoffswitch-checkbox {
      display: none;
  }
  .onoffswitch-label {
      display: block; overflow: hidden; cursor: pointer;
      border: 2px solid #E3E3E3; border-radius: 10px;
  }
  .onoffswitch-inner {
      width: 200%; margin-left: -100%;
      -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
      -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
  }
  .onoffswitch-inner:before, .onoffswitch-inner:after {
      float: left; width: 50%; height: 15px; padding: 0; line-height: 15px;
      font-size: 7px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  }
  .onoffswitch-inner:before {
      content: "ON";
      padding-left: 5px;
      background-color: #5B969C; color: #EEEEEE;
  }
  .onoffswitch-inner:after {
      content: "OFF";
      padding-right: 5px;
      background-color: #EEEEEE; color: #5B969C;
      text-align: right;
  }
  .onoffswitch-switch {
      width: 15px; margin: 0px;
      background: #FFFFFF;
      border: 2px solid #E3E3E3; border-radius: 10px;
      position: absolute; top: 0; bottom: 0; right: 26px;
      -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
      -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
  }
  .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
      margin-left: 0;
  }
  .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
      right: 0px; 
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="onoffswitch"&gt;
      &lt;input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"      id="onoffswitch6"&gt;
      &lt;label class="onoffswitch-label" for="onoffswitch6"&gt;
          &lt;div class="onoffswitch-inner"&gt;&lt;/div&gt;
          &lt;div class="onoffswitch-switch"&gt;&lt;/div&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Edit:</strong> after the answers I added this script to the page and a PHP file. However, it only changes to 1 in the database, but doesn't change it back to 0.</p>
  
  <p>Script:</p>
  
  <pre><code>$(document).ready(function(){
              $('#onoffswitch6').change(function() {
                  var checked = $(this).is(':checked'); //true or false?
                  $.ajax({
                      type: "post",
                      url: "encrypt.php", //PHP or whichever other language script that updates your database
                      data: { onOrOff : checked } //access this value in your script via $_POST['onOrOff'], if it's a PHP script
                      });
              });
          });
  </code></pre>
  
  <p>PHP File:</p>
  
  <pre><code>&lt;?php
  //Start session
  session_start();
  
  //Include database connection details
  require_once('connection.php');
  
  if(isset($_POST['onOrOff']))
  {
      if ($_POST['onOrOff'] == false) {
          global $onOrOff;
          $onOrOff = 0;
      } else if ($_POST['onOrOff'] == true) {
          global $onOrOff;
          $onOrOff = 1;
      };
  
  $qry = "UPDATE member SET value='$onOrOff' WHERE id='$_SESSION[SESS_MEMBER_ID]'";
  $result = mysql_query($qry) or die("An error occurred ".mysql_error());
  }
  ?&gt;
  </code></pre>