Input by clicking Add

Question

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

Follows 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 picks up the form information. Receives

<?php

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

  }
?>

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>

<form method="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 HTML) with id="add_div", we add the "click" function so that, when clicking, the defined function is executed.

First, no more clicks (one at a time) and check if we already have as many Ivs as possible - set at start - var maximo = 5;

If it doesn’t, we’ll use the function append from jquery to add another div (a div with 2 inputs) to the initial div, with id="idDiv". Later Incremented i.

REMOVE

We use the function on jquery, to add events click the added Divs.

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

Then we use the function .parent jquery to remove the corresponding div.

With this code, the DIV we’re removing is the one we press REMOVER and not the last one inserted.

To collect

Note that added [] brackets in attribute nameinputs. When you put a "name" with [] square 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 peer-filled inputs:

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

}