use checkbox with ajax to update database-CodePudding

So, I am try to update the fields in my database (id[int], status[boolean]) using a checkbox with Ajax. This should be done without refreshing the page and not using a submit button. I have tried multiple tutorials and non seems to work for me. To name a few: Ajax updating database when a checkbox is checked, checkbox on change ajax call, update database with checkbox

Please I really need help with this one been on this for days. This is my attempt at it:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="jquery.min.js"></script>

</head>
<body>

    <input type="checkbox" name="action1" id="action1" title="Action 1" value="1"/>
  
<script type="text/javascript">
 $("#action1").change(function () {
    var value = $(this).val();
    $.ajax({
        type: "POST",
        url: "update.php",
        async: true,
        data: {
            action1: value // as you are getting in php $_POST['action1'] 
        },
        success: function (msg) {
            alert('Success');
            if (msg != 'success') {
                alert('Fail');
            }
        }
    });
});
</script>


</body>
</html>

update.php

 <?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "api";
// Create connection
$conn = new mysqli($servername, $username, $password, $database);

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
//echo "Connected successfully";

 if($_POST['action1']==1){  //as used variable name "value" in ajax post data
          $sql = "UPDATE toggle SET status = '1' WHERE id = '1'"; //query was incomplete and missing ";"
          
          echo 'success';
     }
     else{
          $sql = "UPDATE toggle SET status = '0' WHERE id = '1'"; // missing ";"
          
          echo 'success';
     }
     $result=$conn->query($sql);
?>

CodePudding user response：

Your update file returns 'success' no matter what data is sent to it. Try it this way:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

</head>
<body>

    <input type="checkbox" name="action1" id="action1" title="Action 1" value="2"/>Action
  
<script type="text/javascript">
 $("#action1").change(function () {
    var value = $(this).val();
    $.ajax({
        type: "POST",
        url: "update.php",
        async: true,
        data: {
            action1: value // as you are getting in php $_POST['action1'] 
        },
        success: function (msg) {
                alert(msg);
        }
    });
});
</script>
</body>

update.php

 <?php
 $servername = "localhost";
 $username = "root";
 $password = "";
 $database = "stackoverflow";
 // Create connection
 $conn = new mysqli($servername, $username, $password, $database);

 // Check connection
 if ($conn->connect_error) {
   die("Connection failed: " . $conn->connect_error);
 }
  if($_POST['action1']==1){
      $sql = "UPDATE toggle SET status = '1' WHERE id = '1'";
      
      echo 'success';
 }
 else{
      $sql = "UPDATE toggle SET status = '0' WHERE id = '1'";
      
      echo 'fail';
 }
 $result=$conn->query($sql);
 ?>