Fill inputs dynamically after change in select

Question

Good afternoon, I need help with a part of the code. I basically have a form with two selects(aluno_id, product name) and some inputs(price, quantity, total price), I use functions to fill arrays and then select them by ID and display by name.

Now I need to make sure that every time the products select is changed, do a search for the ID in the product array, and fill in the input commodity with a price equivalent to product. So I researched this is done with Javascript and JSON, and possibly Ajax, I made some attempts but did not succeed.

Remembering that the data of this form will be registered in the BD after.

<?php require_once("cabecalho.php");
require_once("banco-vendas.php");
require_once("banco-aluno.php");
require_once("banco-produto.php");

$venda = array("aluno_id" => "1", "produto_id" => "1",
"quantidade_produto" => "", "preco_produto" => "", "valor_total" => "",
"data_operacao" => "");
$listaPreco = listaPreco($conexao); // cria um array tridimensional 
listaPreco com id, nome, preco
$alunos = listaAlunos($conexao);    // cria array alunos
$produtos = listaProdutos($conexao);  // cria array produtos

$teste = array_search('2', array_column($listaPreco,'id')); // teste filtro 


?>

<h1>Formulário Vendas</h1>
<form action="adiciona-venda.php" method="post">
  <table class="table">
    <?php include("vendas-formulario-base.php"); // inputs e selects do 
formulario?>
    <tr>
      <td>
          <button class="btn btn-primary" type="submit">Cadastrar</button>
      </td>
    </tr>
  </table>
</form>

<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$('select[name="produto_id"]').on('change', function(){ // select produtos
  var teste = "<?php Print($teste);?>";
  // var ar = <?php json_encode($listaPreco) ?>;
  // alert(ar);
  $("#cont").val(teste); // input preco


});
</script>
<?php include("rodape.php"); ?>

Answer 1

Assuming that the variable $listaPreco follow the following structure:

{ produto_id: valor, produto_id2: valor }

You can store this value in a Javascript variable (as you were already doing), and access the index for the selected product.

$('select[name="produto_id"]').on('change', function(){ // select produtos
    var listaPrecosProdutos = <?php echo json_encode($listaPreco);?>;
    var produto_id = $(this).val();
    $("#cont").val(listaPrecosProdutos[produto_id]);
});

Answer 2

Following @João-Jácome’s tips, I made just a few modifications: I added a FOR to scroll through the Array, and an If to find the corresponding product ID. The Javascript code looks like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$('select[name="produto_id"]').on('change', function(){ // select produtos

   var listaPrecosProdutos = <?php echo json_encode($listaPreco);?>;
   var produto_id = $(this).val();

   for (i = 0; i<listaPrecosProdutos.length;i++){
     if (produto_id == listaPrecosProdutos[i].id){
       $("#cont").val(listaPrecosProdutos[i].preco);
     } else{

     }
   }

 });
</script>