Complete other fields

Question

Good night
The problem was this, I have a select where it contains all registered products, autocompletei it with a foreach to pull all the products from the bank, what I want is the following, when I select a product in my select I want the other fields to be supplemented with the price by quantity among others

Code

<?php
    require_once "../Controller/Conecta.php";
    require_once "../Controller/Busca.php";
    require_once "ViewCabecalhoInterno.php";

    // Instanciando objetos
    $conecta = new Conecta();
    $busca = new Busca();

    // Atribuindo variavel a sessao id do usuario
    $idUsuario = $_SESSION["usuarioId"];

    // Atribuindo variavel as funcoes
    $conexao = $conecta->conexao();
    $listaProdutos = $busca->buscarApenasProdutos($conexao, $idUsuario);

?>

    <form action="../Model/ModelCadastrarNovaEntradaEstoque.php" method="post" class="form-horizontal">
        <!-- Id usuario -->
        <input type="hidden" value="<?= $idUsuario?>">

        <!-- Produto -->
        <div class="col-lg-7">
            <!-- Legenda -->
            <label for="nomeProduto" class="label label-info">Nome do Produto</label>

            <!-- Campo -->
            <select name="nomeProduto" id="nomeProduto" class="form-control">
                <?php
                    foreach ($listaProdutos as $produto)
                {
                    ?>

                    <!-- Produtos -->
                    <option value="<?= $produto['id'] ?> "><?= $produto['nomeProduto'] ?></option>

                    <?php
                }
                ?>
            </select>
        </div>

        <!-- Preco -->
        <div class="col-lg-4">
            <!-- Legenda -->
            <label for="precoProduto" class="label label-info">Preço do Produto</label>

            <!-- QUERO QUE ESTE CAMPO SEJA COMPLETADO, DENTRE OUTROS QUE IREI FAZER -->
            <input type="text" name="precoProduto" id="precoProduto" class="form-control" value="<?= $produto['valorVenda']?>">
        </div>
    </form>

<?php
    require_once "ViewRodape.php";
?>

Answer 1

For the answer, I will only consider HTML and Javascript code, assuming that your PHP code works as expected. We will also assume that the loop PHP generates the following HTML snippet for select:

<select name="nomeProduto" id="nomeProduto">
  <option value="1">Cipromox</option>
  <option value="2">Honotron</option>
  <option value="3">Isotrack</option>
</select>

To avoid new queries with the database, you can already store all desired data in properties data-* within each option (links on the subject at the end of the reply). It would look something like this:

<select name="nomeProduto" id="nomeProduto">
  <option value="1" data-price="5.00" data-quantity="15">Cipromox</option>
  <option value="2" data-price="3.56" data-quantity="50">Honotron</option>
  <option value="3" data-price="7.99" data-quantity="25">Isotrack</option>
</select>

Note that price and quantity values are stored in properties data-price and data-quantity respectively. This will be done with PHP itself within the loop:

<option value="<?= $produto['id'] ?>" data-price="<?= $produto['preco'] ?>" data-quantity="<?= $produto['quantidade'] ?>"><?= $produto['nomeProduto'] ?></option>

Or something similar. So, with Javascript, you can treat the event change of select, retrieve the option selected and fetch the respective price and quantity values in these properties.

// Objetos de manipulação do DOM:
const select   = document.getElementById("nomeProduto");
const price    = document.getElementById("precoProduto");
const quantity = document.getElementById("quantidadeProduto");

// Trata o evento change do select:
select.addEventListener("change", function (event) {

  // Obtém o option que foi selecionado:
  let _selectedOption = this.options[this.selectedIndex];

  // Obtém o valor da propriedade data-price:
  let _price = _selectedOption.getAttribute("data-price");

  // Obtém o valor da propriedade data-quantity:
  let _quantity = _selectedOption.getAttribute("data-quantity");

  // Atualiza o valor do campo do preço:
  price.value = _price;

  // Atualiza o valor do campo da quantidade:
  quantity.value = _quantity;

});

So you’ll have something like:

// Objetos de manipulação do DOM:
const select   = document.getElementById("nomeProduto");
const price    = document.getElementById("precoProduto");
const quantity = document.getElementById("quantidadeProduto");

// Trata o evento change do select:
select.addEventListener("change", function (event) {
  
  // Obtém o option que foi selecionado:
  let _selectedOption = this.options[this.selectedIndex];
  
  // Obtém o valor da propriedade data-price:
  let _price = _selectedOption.getAttribute("data-price");
  
  // Obtém o valor da propriedade data-quantity:
  let _quantity = _selectedOption.getAttribute("data-quantity");
  
  // Atualiza o valor do campo do preço:
  price.value = _price;
  
  // Atualiza o valor do campo da quantidade:
  quantity.value = _quantity;

});

<select name="nomeProduto" id="nomeProduto">
    <option value="1" data-price="5.00" data-quantity="15">Cipromox</option>
    <option value="2" data-price="3.56" data-quantity="50">Honotron</option>
    <option value="3" data-price="7.99" data-quantity="25">Isotrack</option>
</select> 

Preço: <input type="text" id="precoProduto"> 
Quantidade: <input type="text" id="quantidadeProduto">

Readings

• Using data Attributes
• Using HTML5 Custom Data Attributes
• Everything you need to know about the HTML5 Date attribute