0

Boa noite
O problema foi o seguinte, tenho um select onde contem todos os produtos cadastrados, autocompletei ele com um foreach para que puxe todos os produtos do banco, o que quero é o seguinte, quando eu selecionar um produto no meu select quero que os outros campo sejam completados com o preço a quantidade dentre outros

Código

<?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";
?>
2
  • Você quer que os outros sejam completados apenas quando selecionar um item no select?
    – Woss
    Commented 6/06/2017 às 2:12
  • Exato, por padrão, ele vem com um item selecionado, gostaria que os outros campos fosse preenchidos com os respectivos valores que estão dentro do banco Commented 6/06/2017 às 3:00

1 Resposta 1

1

Para a resposta, irei apenas considerar os códigos HTML e JavaScript, partindo do pressuposto que seus códigos PHP funcionam como o esperado. Também iremos supor que o loop do PHP gera o seguinte trecho de HTML referente ao select:

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

Para evitar novas consultas com o banco de dados, você já pode armazenar todos os dados desejados em propriedades data-* dentro de cada option (links sobre o assunto no final da resposta). Ficaria algo assim:

<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>

Perceba que os valores de preço e quantidade são armazenados nas propriedades data-price e data-quantity respectivamente. Isso será feito com o próprio PHP dentro do loop:

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

Ou algo semelhante. Assim, com JavaScript, você pode tratar o evento change do select, recuperar o option selecionado e buscar os respectivos valores do preço e quantidade nessas propriedades.

// 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;

});

Assim você terá algo parecido com:

// 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">

Leituras

1
  • Código muito bem explicado, funcionou perfeitamente. Obrigado Commented 6/06/2017 às 16:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .