How do I bring records from the database by clicking on the checkbox using jquery and ajax?

Question

Well, I can bring you data from the bank using ajax, but I want you to click on input of the kind checkbox, he performs the database query and shows me the data inside a flexbox. I have 10 checkbox, with different names and loaded different data, and when clicking on the checkbox 'water', he performs the consultation in the bank and bring me on the screen everything water (carrying every kind of ruler in each flexbox). However the data comes in ajax, and I can also pull in jquery, but I want it to come right after the checked, I created the code already checking the checked of each input but after that I do not know how to perform the query to the bank in the same code, so I put the Alert to see if it works.

CONCLUSION:

• I want to CLICK the checkbox, make a BD query, and bring me that information, inside the flexbox.

HTML

<div id="conteudo">
<div class="flex">REGUAS:</div>
</div>

<div class="checkboxes">

                        <input type="checkbox" id="regua" onclick="checkFiltros()" name="check">
                        <label for="regua">Régua</label><br>
                        <input type="checkbox" id="motor" onclick="checkFiltros()" name="check">
                        <label for="motor">Motor</label> <br>
                        <input type="checkbox" id="canal" onclick="checkFiltros()" name="check">
                        <label for="canal">Canal</label><br>
                        <input type="checkbox" id="fase" onclick="checkFiltros()" name="check">
                        <label for="fases">Fase</label><br>
                        <input type="checkbox" id="vigencia" onclick="checkFiltros()" name="check">
                        <label for="vigencia">Vigência</label>

                    </div>

Jquery

                        $("#regua").click(function(e) {  
                        if($(this).prop("checked") === true){
                              alert("O alerta está funcionando.");
                        }); 


                   )};

                    $("#motor").click(function(e) {
                        if($(this).prop("checked") === true) {

                            alert("O alerta está funcionando.");
                        }
                    });

                     $("#canal").click(function(e) {
                        if($(this).prop("checked") === true) {

                            alert("O alerta está funcionando.");
                        }
                    });   

                    $("#fase").click(function(e) {
                        if($(this).prop("checked") === true) {

                            alert("O alerta está funcionando.");
                        }
                    });   

                    $("#vigencia").click(function(e) {
                        if($(this).prop("checked") === true) {

                            alert("O alerta está funcionando.");
                        }
                    });

        </script>```

PHP

<?php
include("./php/conect_postgre.php");

  $consulta_bd = "SELECT * FROM uniao";
  $result=pg_query($conexao, $consulta_bd);
  if  (($result)){
      while($linha_usuario = pg_fetch_assoc($result)){
          echo $linha_usuario['regua'] . "<br>";
      }
  }else{
      echo "Nenhum resultado encontrado";
  }

Answer 1

Create a function for AJAX and send as parameter the information coming from a checkbox checked.

For example, AJAX is inside the function checkFiltros(), would look like this:

function checkFiltros(dado){
   AJAX AQUI
}

And in the click event, you can take all the checkboxes at once instead of creating one Event Handler for each one:

$(".checkboxes :checkbox").click(function(){
   // envia o id para a função se o checkbox estiver checado
   if(this.checked) checkFiltros(this.id);
});

The selector ".checkboxes :checkbox" will pick up all checkboxes inside the div with the class .checkboxes.

In function checkFiltros(dado), the value of the argument dado will be the checkbox id marked, then you just send this value in your AJAX, for example:

function checkFiltros(dado){
    $.ajax({
       url: "pagina.php",
       method: "post",
       data: { buscar: dado},
       ...resto do código
    });
}

Regarding playing the result of the query within a div (as you already say you are receiving the data via AJAX), basically would be using the .html() jQuery (similar to .innerHTML) on the return of the request:

success: function(data){
   $("#conteudo .flex").html(data);
}