Fill inputs dynamically after change in select

0

Good afternoon, I need help with some of the code. Basically I have a form with two selects ( aluno_id, producto_id ) and some inputs ( product_preco, quantity, preco_total ), use functions to fill arrays and then selects by ID and display By the name.

I now need to make each product selection change, search the ID in the product array, and fill in the product_preco input with the price equivalent to product_id . For what I researched this is done with Javascript and JSON, and possibly Ajax, I made a few attempts but did not succeed.

Remembering that the data of this form will be registered in the DB later.

<?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"); ?>
    
asked by anonymous 13.11.2017 / 19:57

2 answers

0

Following the tips of @ Joao-Jacome, I made just a few modifications: I added a FOR to go through the Array, and an If to find the product_id corresponding to the 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>
    
16.11.2017 / 14:07
0

Assuming 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]);
});
    
15.11.2017 / 13:16