Campos Dinâmicos com PHP
Estou criando um formulário dinâmico, onde o usuário poderá adicionar quantos campos ele quiser. Porém não estou conseguindo pegar essas informações, eu coloquei no name de cada input o nome do campo acompanhando de uma array. Exemplo: name="quantidade[]", quando eu mando para o arquivo PHP para executar ele pega somente a primeira posição Array[0], estou dando um print_r para verificar quais os valores que tem dentro do array.
Segue meu código:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
</head>
<body>
<div class="form-group">
<form name="form1" action="exe.php" method="POST" enctype="multipart/form-data">
<label for="exampleInputEmail1">Digite a fração de bitcoins inteira (Valor TOTAL):</label>
<input type="text" class="form-control" id="exampleInputEmail1" name="valor_total" aria-describedby="emailHelp" placeholder="Digite a fração total de bitcoins" required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Digite a fração de bitcoins:</label>
<div id="dynamicDiv">
<p>
<input type="text" id="inputeste" class="form-control" name="quantidade[]" size="20" value="" placeholder="Digite a fração" />
<br>
<a class="btn btn-primary" href="javascript:void(0)" id="addInput">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Adicionar outra fração
</a>
</p>
</div>
</div>
<div class="form-group">
<div id="dynamicDiv1">
<p>
<label for="exampleInputEmail1">Copie o número da carteira (Wallet):</label>
<input type="text" id="inputeste1" class="form-control" name="carteira[]" size="20" value="" placeholder="Digite o número da carteira" />
<br>
<a class="btn btn-primary" href="javascript:void(0)" id="addInput1">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Adicionar outra carteira
</a>
</p>
</div>
<div class="form-group">
<div id="dynamicDiv2">
<p id="message"><b>Selecione o comprovante de pagamento</b></p>
<!-- <img style="min-height:120;min-width:200;max-height:120px;" id="image"/><br> -->
<input type="file" id="inputeste2" name="file[]" onchange="updatepicture(this);" />
<a class="btn btn-primary" href="javascript:void(0)" id="addInput2">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Adicionar outro comprovante
</a>
<iframe style="display:none" name="iframe"></iframe>
</div>
</div>
<button type="submit" style="margin-left:1%" class="btn btn-primary" onclick="verificar_foto()">Cadastrar</button>
</form>
</body>
<script>
//Script que carrega o load na tela inicial.
jQuery(window).load(function () {
$(".loader").delay(50).fadeOut("slow"); //retire o delay quando for copiar!
$("#tudo_page").toggle("fast");
});
//Função usada para adicionar os campos dinamicamente.
</script>
<script>
$(function() {
var scntDiv = $('#dynamicDiv');
$(document).on('click', '#addInput', function () {
$('<p>'+
'<input type="text" id="chuchu" class="form-control" name="quantidade[]" size="20" value="" placeholder="Digite outra fração" /><br> '+
'<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
'<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
'Remover Campo'+
'</a>'+
'</p>').appendTo(scntDiv);
return false;
});
var scntDiv1 = $('#dynamicDiv1');
$("#addInput1").on('click', function () {
$('<p>'+
'<input type="text" id="dynamicChuchu" class="form-control" name="carteira[]" size="20" value="" placeholder="Digite outra carteira" /><br> '+
'<a class="btn btn-danger" href="javascript:void(0)" id="remInput1">'+
'<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
'Remover Campo'+
'</a>'+
'</p>').appendTo(scntDiv1);
return false;
});
$(document).on('click', '#remInput1', function () {
$(this).parents('p').remove();
return false;
});
var scntDiv2 = $('#dynamicDiv2');
$("#addInput2").on('click', function () {
$('<p>'+
'<br>'+
'<input type="file" id="dynamicChuchu2" name="file[]" onchange="updatepicture(this);" /> '+
'<a class="btn btn-danger" href="javascript:void(0)" id="remInput2">'+
'<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
'Remover Campo'+
'</a>'+
'</p>').appendTo(scntDiv2);
return false;
});
$(document).on('click', '#remInput2', function () {
$(this).parents('p').remove();
return false;
});
$(document).on('click', '#remInput', function () {
$(this).parents('p').remove();
return false;
});
});
</script>
</html>Discussão (2)
Carregando comentários...