Dynamic checkbox with Ajax and PHP

Question

I am generating a product div with php, in this list I would like to add a check-box with boolean value 0-1 for active and disabling. When the manager clicks disabled the product does not appear to the user, I can’t find an example about it so when you click the check-box Ajax sends the value to PHP. Below is the PHP code for the generation of div.

               $result_produto = "SELECT * FROM produto";
        $resultado_produto = mysqli_query($conn, $result_produto);
        while($row_produto = mysqli_fetch_assoc($resultado_produto)){

            echo "<div class='row border bg-color: #80006f'>" . "<div class='col-2 p-3 '>" . "<img class='Img rounded border border-primary'  src='". $pasta . $row_produto['Img_produto'] . "'id='produto''>" . "</div>"
                . "<div class='col-5>'" . "<div class='row'>" . "<span class='name-prod'> Nome: </span>" . $row_produto['Nome_produto'] .
                "<div class='row'>" ."<span class='desc-prod-title'> Descrição:</span>" . $row_produto['Descricao_produto'] . "</div>" . "</div>".
                 "<div class='col-2>'" . "<span class='price-prod'> Preço: </span>" . $row_produto['Preco_produto'] . "</div>" . "</div>";   
        }
        ?>

Answer 1

On the client side (browser) it is with Javascript that you can trigger new web requests and then run another PHP script that updates the information in your database.

Introduction to AJAX is a good start to understand this well.

Your code must be something like this:

$(document).ready(function() {
  $('.status-check-input').on('click', function() {
    let id = $(this).attr('data-id');
    let enabled = $(this).is(':checked');
    console.log(id);
    console.log(enabled);
    $.ajax({
      url: "https://example.org/php/file/update/status.php",
      method: "POST",
      dataType: "applicatin/json",
      data: {
        "id": id,
        "enabled": enabled
      },
      success: function(data) {
        console.log(data);
      },
      error: function(err) {
        console.log(err);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row border bg-color: #80006f">
  <div class="col-2">
    <input type="checkbox" data-id="32" class="status-check-input">
  </div>
  <div class="col-2">
    <img class='Img rounded border border-primary'  src="/path/to/folder/product_image.jpg" id="32">
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col">
        <span class="name-prod">Nome:</span> Um Produto
      </div>
      <div class='row'>
        <div class="col">
          <span class='desc-prod-title'>Descrição:</span> Apenas um produto de teste
        </div>
      </div>
      <div class="row">
        <div class="col">
          <span class="price-prod">Preço:</span> R$ 42,31
        </div>
      </div>
    </div>
  </div>
</div>

Note that I worked with just the output of a product explicitly written with HTML and considered the product id as 32. Your product listing should produce a result similar to this.

And, my AJAX request will return error because the destination in the field url is not correct, you have to change for your case, but we saw on the console the id of the product and the status of the checkbox field in the variable enabled.

Now that you have jQuery sending your data via AJAX, to get the values in PHP:

$data = json_decode(file_get_contents('php://input'), true);
print_r($data);
/** Saída
Array
(
    [id] => 32
    [enabled] => 1
)
*/