Input when you click Add

0

I want you to add a new input, with a proper name, so I can pick up the information and send it through the form.

Follow the code.

                           Requests     

<form method="POST" action="recebe.php?valida=TRUE">
   Cód. Produto: <input type="text" name="codProduto"/>
   Quantidade: <input type="text" name="qtdProduto"/>
   <input type="button" name="adicionar" value="adicionar"/>
   <input type="submit" value="Enviar"/>
</form>

Page that takes information from the form.                            Receive     

<?php

if($_REQUEST["valida"] = TRUE && isset($_REQUEST["valida"])) {
    echo "Código do Produto: " . $_POST["codProduto"] . "<br>";
    echo "Quantidade do Produto: " . $_POST["qtdProduto"];
  } else {

  }
?>
    
asked by anonymous 09.05.2018 / 00:50

1 answer

1

$(document).ready(function() {
   var maximo = 5;   //maximo de 5 campos
   var i = 1;
   $('#add_div').click (function(e) {
     e.preventDefault();  //previne novos cliques
     if (i < maximo) {
       $('#idDiv').append('<div>\
          Cód. Produto: <input type="text" name="codProduto[]"/> Quantidade: <input type="text" name="qtdProduto[]"/>\
          <a href="#" class="remove">Remover</a>\
           </div>');
           i++;
     }
  });
 
    // Remove o div anterior
    $('#idDiv').on("click",".remove",function(e) {
      e.preventDefault();
      $(this).parent('div').remove();
      i--;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><formmethod="POST" action="recebe.php?valida=TRUE">
<input type="button" id="add_div" value="adicionar"> <input type="submit" value="Enviar"/>
<br>
<div id="idDiv">
    <div>
    Cód. Produto: <input type="text" name="codProduto[]"/>
    Quantidade: <input type="text" name="qtdProduto[]"/>
     
    </div>
</div>
</form>

ADD

To the button (defined in the HTML) with the id="add_div", we add the "click" function to execute the defined function.

First, do not allow more clicks (one at a time) and check if we already have as many divs as possible - defined at the beginning - var maximo = 5;

If not, let's use the append function of jquery to add another div (a div with 2 inputs) to the initial div, with id="idDiv". Subsequently we increase the i .

REMOVE

We used the on function of jquery, to add click events to the added divs.

Why do we have to use this function? Because, when loading the document, the browser parses the DOM, and any javascript code (or jquery) we have is automatically initialized and the events are "assigned". However, these DIVS are added dynamically, they do not exist when the document is loaded. So we have to use this function to add the event "click" to the corresponding DIV.

Next, we use the .parent function of jquery to remove the corresponding div.

With this code, the DIV that we are going to remove is the one where we press REMOVER and not the last one inserted.

To collect

  

Note that you added% with brackets% in the [] attribute of the inputs. When you put a "name" with name brackets it is sent in array form to the receiver.

  $codProduto = $_POST['codProduto'];
  $qtdProduto = $_POST['qtdProduto'];

  $result = count($codProduto);

    for ($i = 0; $i < ($result) ; $i++) {
      echo "Código do Produto: " . $codProduto[$i];
      echo " - Quantidade do Produto: " . $qtdProduto[$i] . "<br>";
    }

To return only the values of the inputs filled in pairs:

if ($_POST['submit']=="Enviar"){

    $codProduto = array_filter($_POST['codProduto']);
    if (empty($codProduto)){
        $erro = "Código do Produto é requerido <br>";
    }

    $qtdProduto = array_filter($_POST['qtdProduto']); 
    if (empty($qtdProduto)){
       $erro .= "Quantidade do Produto é requerido <br>";
    }     

    if ($erro == ""){

       $result = count($codProduto);

       for ($i = 0; $i < ($result) ; $i++) {

          if ($codProduto[$i]!="" && $qtdProduto[$i]!=""){
            echo "Código do Produto: " . $codProduto[$i];
            echo " - Quantidade do Produto: " . $qtdProduto[$i] . "<br>";
          }

       }

    } else {
      echo $erro;
    }

}
    
09.05.2018 / 02:26