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