Taking data from a select to trigger an IF before sending the data (POST)

Question

I am improving my original project, where the Giovane solved the problem I had, but now I’m in a situation where, depending on the select, I’ll have different options and actions.

In my current use, I have the JS as follows (where the value to be filled will only appear if the option is YES, otherwise the field will not appear):

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

On the same page, I tried the following code (unsuccessfully):

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

Here are where I stuck. I can’t get this data from select, and search for this value (without clicking on SEND), ie during the fields fills.

I saw in that link that has an option to use AJAX with Jquerry, but what I could absorb still does not fit my case.

I saw that maybe I can use the IF itself that is inside the JS, but once again, I can’t deduce where to go. I also came across the option of an eventlistener, but I couldn’t understand how I would use it in my structure, and whether it would help.

I would be very grateful if you could help me with a direction to follow. Thank you.

Answer 1

It is possible to mount this input dynamically via jQuery, I think it will be easier than sending a POST:

First we change the following excerpt from 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>

Then inside the code block of the $(document).ready create an eventlistener using jQuery . on() which will automatically generate that HTML snippet every time you change the value of select(event 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: documentation jQuery . html()

obs. 2: the HTML of the element .seletor-produto is empty when initializing the page, it is possible to force the execution of the event using the function Trigger() from jquery to run it the first time without changing the value of select:

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

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