Complete other fields

Navigation
0

Good evening Home The problem was as follows, I have a select where it contains all the products registered, autocomplete it with a foreach so that it pulls all the products of the bank, what I want is the following, when I select a product in my select I want the other field to be completed with the price the 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";
?>
    
asked by anonymous 06.06.2017 / 03:47

1 answer

1

For the answer, I'll just consider the HTML and JavaScript codes, assuming your PHP code works as expected. We will also assume that the loop of PHP generates the following HTML snippet referring to select : 

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

To prevent further database queries, you can already store all desired data in data-* properties within each option (links on the subject at the end of the response). 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>

Notice that the price and quantity values are stored in the data-price and data-quantity properties, respectively. This will be done with PHP itself within 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 search their respective price and quantity values in those 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

06.06.2017 / 15:30
Why is my contact form not submitted? Error trying to generate signed APK. What can be wrong?