Using dynamic combobox how to send the id to server automatically without using the Submit button and return all values where id is equal?

Question

I am using a dynamic datalist that makes auto-complete.

In the combobox below this linked with database gestao_vendas, where in the stock table it brings all the names of the products and the respective idProduto.

How to do when I click on a combobox option it should send the idProduto to server and then return to the line where the idProduto is equal, automatically without having to click the Button?

<input type="text" id="txtID" name="Produtos" list="ent" />
<datalist id="ent">
<label>select a Produtos from list:</label>
<select name="Produtos">

<?php 
  include 'teste/conexao/conexao.php';

  $selecionar="SELECT * FROM `gestao_vendas`.`estoque`";
  try {
  $resultado = $conexao->prepare($selecionar);
  $resultado->execute();
  if(count($resultado)){
  foreach ($resultado as $res) {    
?>
  <option id="<?php echo $res['codProduto'];?>" value="<?php echo $res['NomeProduto'];?>"> </option>

<?php
  }
  }
    } catch (PDOException $e) {
    //  echo 'ERROR: ' . $e->getMessage();
        }
?>

</select>
</datalist>

I would like you to view yourself in this table.

<?php

$selecionar="SELECT * FROM `estoque` WHERE `codProduto`=$idProduto";
  try {
  $resultado = $conexao->prepare($selecionar);
  $resultado->execute();
  while ($mostrar = $resultado->Fetch(PDO::FETCH_OBJ)) {                
  ?>

<tr>
  <td><?php echo $mostrar->codProduto; ?></td>
  <td><?php echo $mostrar->NomeProduto; ?></td>
  <td><?php echo $mostrar->descricao; ?></td>
</tr>   

<?php
  }
  } catch (PDOException $e) {
  //  echo 'ERROR: ' . $e->getMessage();
    }
?>

Answer 1

Hello,

I don’t know if I understand it very well, but you will need to use ajax to send a request dynamically without clicking the button. You will also need to generate the table with javascript.

Code to get the id of the selected option: https://jsfiddle.net/4ar90ztx/1/

For ajax test this code snippet:

$('#id_do_select').change(function () {
            var codProduto = $('#id_do_select').find(":selected").attr("id");
            $.ajax({
                url: "pagina.php",
                data: { codProduto: codProduto},
                method: "POST",
                success: function(){
                   //Lógica para gerar a tabela dinâmicamente;
                }
            });
    });

To get the value of the product code in php:

if(isset($_POST['codProduto'])){
   $codProduto = $_POST['codProduto'];
}