Update multiple checkboxes with php-CodePudding

This question has probably been asked multiple times but I still cannot figure out a proper working solution to my problem. So, I have an sql table (id-> int and status-> tiny-int) which needs to be activated without submit button and retain their current state either on or off. I found the solution to my problem here. But, this is only for one checkbox and I need it to be for four checkboxes. My attempt at it sorta works but I feel there is probably a better way of doing it. Can someone please provide me with any suggestions?

thanks

<form id="form" action="" method="POST" >

  <input type="checkbox" name="checkbox1" onchange="$('#form').submit();" 
   <?php if(isset($_POST['checkbox1'])) { echo 'checked="checked"'; } ?>


  <input type="checkbox" name="checkbox2" onchange="$('#form').submit();" 
   <?php if(isset($_POST['checkbox2'])) { echo 'checked="checked"'; } ?>>
 

</form>
  
if (isset($_POST['checkbox1'])) {
         $sql1="UPDATE switch SET status = '1' WHERE id = '1'";
        
     } else {
         $sql1="UPDATE switch SET status = '0' WHERE id = '1'";
        
     }
     
       $result=$conn->query($sql1);
       
     if (isset($_POST['checkbox2'])) {
         $sql2="UPDATE switch SET status = '1' WHERE id = '2'";
        
     } else {
         $sql2="UPDATE switch SET status = '0' WHERE id = '2'";
        
     }
     
       $result=$conn->query($sql2);

CodePudding user response：

$('#form') is jquery feature. https://jquery.com/ If you want to use Jquery you need to add the library via <script> tag. But I don't see any reason to use it here, you could use Javascript function: document.getElementById() to select form DOM element.

So I propose changing from: onchange="$('#form').submit();" to onchange="document.getElementById("form").submit();"

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

It also looks like you forgot to add <?php tag after your form, before if statements.

CodePudding user response：

You only need to multiply your code blocks following @Kudzė 's instructions. Like this:

Tip: at the future when you want to store inputs from the users in the database please use prepared SQL statements this is prevent SQL injection.

<?php
if(isset($_POST) && count($_POST) > 0){
    if (isset($_POST['checkbox1'])) {
        $sql1="UPDATE switch SET status = 1 WHERE id = 1";
    } else {
        $sql1="UPDATE switch SET status = 0 WHERE id = 1";
    }
    $result=$conn->query($sql1);

    if (isset($_POST['checkbox2'])) {
        $sql2="UPDATE switch SET status = 1 WHERE id = 2";
    } else {
        $sql2="UPDATE switch SET status = 0 WHERE id = 2";
    }
    $result=$conn->query($sql2);

    if (isset($_POST['checkbox3'])) {
        $sql3="UPDATE switch SET status = 1 WHERE id = 3";
    } else {
        $sql3="UPDATE switch SET status = 0 WHERE id = 3";
    }
    $result=$conn->query($sql3);

    if (isset($_POST['checkbox4'])) {
        $sql4="UPDATE switch SET status = 1 WHERE id = 4";
    } else {
        $sql4="UPDATE switch SET status = 0 WHERE id = 4";
    }
    $result=$conn->query($sql4);
}

?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form id="form" action="" method="POST" >

        <label>
            Checkbox 1
            <input type="checkbox" name="checkbox1" value="1" onchange="document.getElementById('form').submit();"
                <?php if(isset($_POST['checkbox1'])) { echo 'checked="checked"'; } ?>>
        </label>

        <label>
            Checkbox 2
            <input type="checkbox" name="checkbox2" value="1" onchange="document.getElementById('form').submit();"
                <?php if(isset($_POST['checkbox2'])) { echo 'checked="checked"'; } ?>>
        </label>

        <label>
            Checkbox 3
            <input type="checkbox" name="checkbox3" value="1" onchange="document.getElementById('form').submit();"
                <?php if(isset($_POST['checkbox3'])) { echo 'checked="checked"'; } ?>>
        </label>

        <label>
            Checkbox 4
            <input type="checkbox" name="checkbox4" value="1" onchange="document.getElementById('form').submit();"
                <?php if(isset($_POST['checkbox4'])) { echo 'checked="checked"'; } ?>>
        </label>

    </form>
</body>
</html>