0

Estou aprimorando meu projeto original, onde o Giovane solucionou o problema que tinha, porém agora travei em uma situação onde, dependendo do select, terei diferentes opções e ações.

No meu uso atual, tenho o JS da seguinte maneira (onde o valor para ser preenchido somente aparecerá caso a opção seja SIM, caso contrário, o campo não aparecerá):

<script type='text/javascript'>
  $(document).ready(function() {

    var j_intense = $('#intense');
    var j_outras = $('#outras');
    var j_qtd_outras = $('#qtd_outras');
    var j_outras_dados = $('#outras_dados');
    var j_pal15 = $('#pal15');
    var j_l16 = $('#l16');
    var j_l15 = $('#l15');
    var j_l13 = $('#l13');
    var j_lcopo = $('#lcopo');
    var j_a1 = $('#a1');
    var j_a05 = $('#a05');

    var j_k15 = $('#k15');
    var j_kmousse = $('#kmousse');
    var j_n15 = $('#n15');
    var j_p18 = $('#p18');
    var j_pcopo = $('#pcopo');
    var j_o15 = $('#o15');
    var j_f1 = $('#f1');
    var j_f500 = $('#f500');

    inicializarProduto(j_intense);
    inicializarProduto(j_outras);
    inicializarProduto(j_qtd_outras);
    inicializarProduto(j_outras_dados);
    inicializarProduto(j_pal15);
    inicializarProduto(j_l16);
    inicializarProduto(j_l15);
    inicializarProduto(j_l13);
    inicializarProduto(j_lcopo);
    inicializarProduto(j_a1);
    inicializarProduto(j_a05);

    inicializarProduto(j_k15);
    inicializarProduto(j_kmousse);
    inicializarProduto(j_n15);
    inicializarProduto(j_p18);
    inicializarProduto(j_pcopo);
    inicializarProduto(j_o15);
    inicializarProduto(j_f1);
    inicializarProduto(j_f500);

  });

  function inicializarProduto(produto) {
    var valorProduto = produto.find('.valor-produto');
    valorProduto.hide();
    produto.find('.seletor-produto').change(function() {
      if (this.value == 'SIM') {
        valorProduto.show();
      } else {
        valorProduto.hide()
      }
    });
  }
</script>

Na mesma página, tentei o seguinte código (sem êxito):

      <div id="outras" class="linha-produto">
        OUTRA MARCA:
        <select name="outras" class="seletor-produto" required>
          <option disabled selected value> -- Existe outra(s) marca(s)? -- </option>
          <option value="SIM">SIM</option>
          <option value="NÃO">NÃO</option>
        </select>

        <div class="valor-produto">
          <?php
          if ($_POST['outras'] == "NÃO") {
            echo '<input type="hidden" name="qtd_outras" class="input value7" type="number" value="0"><br>';
          } else {
            echo 'QTD OUTRAS MARCAS/PORTAS/EQUIPAMENTOS:
          <input name="qtd_outras" class="input value7" type="number" min="0" max="999" required><br>
          DETALHE AS MARCAS E SUAS QUANTIDADES:
          <input name="outras_dados" type="text" size="50" maxlength="512" required>';
          }
          ?>          
          <br />
        </div>
      </div>

Aí estão onde travei. Não consigo pegar esse dado do select, e buscar esse valor (sem clicar em ENVIAR), ou seja, durante o preenchimentos dos campos.

Vi nesse link que tem uma opção de usar AJAX com JQuerry, mas o que pude absorver ainda não se encaixa em meu caso.

Vi que talvez possa usar o próprio IF que está dentro do JS, porém mais uma vez, não consigo deduzir para onde ir. Me deparei também com a opção de eventlistener, porém não conseguir compreender como usaria na minha estrutura, e se ela ajudaria.

Ficaria muito grato se pudessem me ajudar com uma direção a seguir. Obrigado.

1 Resposta 1

1

É possível montar este input dinamicamente via jQuery, acho que vai ficar mais fácil do que enviar um POST:

Primeiro alteramos o seguinte trecho do HTML:

<div id="outras" class="linha-produto">
    OUTRA MARCA:
    <select name="outras" class="seletor-produto" required>
      <option disabled selected value> -- Existe outra(s) marca(s)? -- </option>
      <option value="SIM">SIM</option>
      <option value="NÃO">NÃO</option>
    </select>

    <div class="valor-produto">
       <!-- Vazio aqui, pois vamos gerar esta parte dinamicamente com o jQuery -->
      <br />
    </div>
  </div>

Em seguida, dentro do bloco de código do $(document).ready criamos um eventlistener utilizando jQuery .on() que irá gerar automaticamente aquele trecho de HTML toda vez que mudar o valor do select(evento change):

$(document).ready(function() {

   // ... 


    $('.seletor-produto').on('change', function() { 
        // toda vez que mudar o select esta função será executada

        var inputContainer = $('.valor-produto'); // elemento onde vamos adicionar o HTML dinamicamente
        var html = ''; //texto HTML criado dinamicamente;

        if (this.value == 'NÃO') {
            html = '<input type="hidden" name="qtd_outras" class="input value7" type="number" value="0"><br>';
        } else {
            html = 'QTD OUTRAS MARCAS/PORTAS/EQUIPAMENTOS:';
            html += '<input name="qtd_outras" class="input value7" type="number" min="0" max="999" required><br>';
            html += 'DETALHE AS MARCAS E SUAS QUANTIDADES:';
            html += '<input name="outras_dados" type="text" size="50" maxlength="512" required>';
        }

        inputContainer.html(html);
        //a função html() é do jQuery, ela seta o texto HTML de dentro do(s) elemento(s) selecionado(s)
    });

    // ...

}); // fecha função $(document).ready()

Obs: documentação jQuery .html()

Obs. 2: o HTML do elemento .seletor-produto está vazio ao inicializar a página, é possível forçar a execução do evento utilizando a função trigger() do jquery para que ele execute na primeira vez sem que seja necessário alterar o valor do select:

//depois do evento on() do exemplo anterior, ainda dentro do $(document).ready()

$('.seletor-produto').trigger('change');

1
  • Funcionou perfeitamente. Agora aprendi mais uma função muito útil. Obrigado pela ajuda. 4/02/2021 às 11:44

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 .