Bring values from a select with AJAX automatically

Question

I started using AJAX for a while and I have a question. I own a <select> and I am trying to bring the value of it on the same page (without giving refresh), however, it is only displayed the value when I click on <select> again, to select another option. How would you show as soon as I selected?

Suppose I select the <select> with value="4", only "4" is shown when I click on <select> again...

index php.:

<select class="common_selector" id="ordenar_tabela">
     <option value="1">Lançamentos</option>
     <option value="2">Menor valor</option>
     <option value="3">Maior valor</option>
     <option value="4">A - Z</option>
     <option value="5">Z - A</option>
</select>

<script>
$(document).ready(function(){

    filter_data();

    function filter_data()
    {
        var action = 'fetch_data'; 
        var ordenacao = $('#ordenar_tabela').val();

        $.ajax({
            url:"verificar.php",
            method:"POST",
            data:{action:action, ordenacao:ordenacao},
            success:function(data){
                $('.filter_data').html(data);
            }
        });
    }

    $('.common_selector').click(function(){
        filter_data();
    });

});
</script>

check.php:

<?php
          $query = "SELECT * FROM produtos_estoque";
            
          // Se o usuário quiser ordenar a tabela...
          if(isset($_POST["ordenacao"])){
        
          $ordenacao = $_POST["ordenacao"];
          echo $ordenacao; //Estou exibindo essa variavel na página, para ver se vai funcionar os demais códigos abaixo...
        
          // $query .= ($ordenacao == 1) ? " ORDER BY ID_produtos DESC" : "";
          // $query .= ($ordenacao == 2) ? " ORDER BY ID_produtos DESC" : "";
          // $query .= ($ordenacao == 3) ? " ORDER BY ID_produtos DESC" : "";
          // $query .= ($ordenacao == 4) ? ' ORDER BY produto' : "";
          // $query .= ($ordenacao == 5) ? ' ORDER BY produto DESC' : "";
        }
?>

Answer 1

Your problem is happening because you call the function filter_data() when the <select> is clicked.

See how to call the function when selecting a new option using the attribute onchange:

<select class="common_selector" id="ordenar_tabela" onchange="filter_data()">
    <option value="1">Lançamentos</option>
    <option value="2">Menor valor</option>
    <option value="3">Maior valor</option>
    <option value="4">A - Z</option>
    <option value="5">Z - A</option>
</select>

function filter_data()
{
    var action = 'fetch_data'; 
    var ordenacao = $('#ordenar_tabela').val();

    $.ajax({
        url:"verificar.php",
        method:"POST",
        data:{action:action, ordenacao:ordenacao},
        success:function(data){
            $('.filter_data').html(data);
        }
    });
}

Another option, keeping HTML intact and using jQuery:

<select class="common_selector" id="ordenar_tabela">
    <option value="1">Lançamentos</option>
    <option value="2">Menor valor</option>
    <option value="3">Maior valor</option>
    <option value="4">A - Z</option>
    <option value="5">Z - A</option>
</select>

function filter_data()
{
    var action = 'fetch_data'; 
    var ordenacao = $('#ordenar_tabela').val();

    $.ajax({
        url:"verificar.php",
        method:"POST",
        data:{action:action, ordenacao:ordenacao},
        success:function(data){
            $('.filter_data').html(data);
        }
    });
}

$(".common_selector").change(function() {
  filter_data();
});