$(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>
ADICIONAR
Ao botão (definido no HTML) com o id=”add_div”, adicionamos a função “click” para que, ao clicar, seja executada a função definida.
Primeiro, não permite mais clicks (um de cada vez) e verifica se já temos o máximo de divs possíveis – definido no inicio – var maximo = 5;
Se não acontecer, vamos usar a função append
do jquery para adicionar mais uma div (uma div com 2 inputs) a div inicial, com o id=”idDiv”. Posteriormente Incrementamos o i
.
REMOVER
Usamos a função on
do jquery, para adicionar eventos de click as divs adicionadas.
Porque temos que usar esta função? Porque, ao carregar o documento, o browser analisa o DOM, e qualquer código de javascript (ou jquery) que tenhamos é automaticamente inicalizado e os eventos “atribuídos”. No entanto, estas DIVS são adicionados dinamicamente, não existem quando o documento é carregado. Assim, temos que usar esta função para adicionar o evento “click” a correspondente DIV.
Depois, usamos a função .parent
do jquery para remover o div correspondente.
Com este código, o DIV que vamos remover é aquele onde pressionamos REMOVER
e não o ultimo inserido.
Para coletar
Note que foi adicionado []
colchetes no atributo name
dos inputs. Quando você coloca um "name" com []
colchetes ele é enviado na forma de array para o receptor.
$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>";
}
Para retornar somente os valores dos inputs preenchidos aos pares:
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;
}
}
$_REQUEST["valida"] = TRUE
, um=
é atribuição, acredito que o que quer é comparação, no caso, troque por==
Para retornar somente os valores dos inputs preenchidos aos pares