Jump to content
eduardaarosaa

Campos Dinâmicos com PHP

Recommended Posts

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>

Share this post


Link to post
Share on other sites

Quando você deu o print os valores apareceram todos?
Em fim!
Faça um loop nesta array e pegue os dados.

<?php
	
$quantidade = "";
	
foreach ($_POST['quantidade'] as $key => $qtd) {
    $quantidade .= $qtd; // concatena com a var $quantidade | Pode tbm somar valores aqui ($quantidade + $qtd )
}	

echo $quantidade;

// Key é o indice do valor na array

 

Share this post


Link to post
Share on other sites

O erro estava no Jquery, os campos dinâmicos não estavam sendo "vistos"... Então usei  event.preventDefault();

Como ficou:

<div id="loader" class="loader"></div>
<div style="display:none" id="tudo_page">
  <?php
  include "sessao.php";
  ?>
</div>

<?php
include "menu.php";

?>

<head>
<script type="text/javascript">
    function updatepicture(e){
        var img = e.files[0];
        var rea = new FileReader();

        rea.readAsDataURL(img);
        rea.onload = function(e){
            var end = rea.result;
            var iframe = document.getElementById("image");
            iframe.src = end;
        }
        //document.getElementById("image").setAttribute("src",pic);
    }
    function verificar_foto(){
        //alert("teste");
        if (document.forms[ 'form1' ].file.value == '' && document.getElementById("image").src==""){
            alert("Anexe o comprovante de pagamento");
            return false;
        } 

    }

    function verificar_dados(){
        var erro = false;
        if (document.form1.quantidade.value == ""){
            alert("Preencha o campo quantidade") ;
            erro = true ;
        }
    if (document.form1.carteira.value == ""){
            alert("Preencha o campo carteira") ;
            erro = true ;
        }
    if (erro==false) {
        document.form1.submit();
    }
    }

</script>
</head>
<body>
<?php 
        if($ativo == 1 || $ativo == 3){
            ?>
<div class='container'> 
    <div class="col-md-12">
        <h2 class="espaco-padrao">Criar uma ordem</h2>
        
</div>
 
<form name="form1" id='form1' action="../Back/realizar_ordem.php" method="POST" enctype="multipart/form-data">
        <div class="form-group">

            <label for="exampleInputEmail1">Digite a fração de bitcoins inteira (Valor TOTAL):</label>
            <input type="text" class="form-control btc" 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 btc" 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" id="cadastrar" style="margin-left:1%" class="btn btn-primary">Cadastrar</button>
        </div>
    </form>

<?php } elseif ($ativo == 0) { ?>
    <div class="container">
    <div class="row espaco-padrao">
        <div class="col-md-12">
    <div class="jumbotron">
  <h1 class="display-4">Bem-vindo!</h1>
  <p class="lead">É necessário enviar seus documentos para criar uma ordem.</p>
  <hr class="my-4">
  <p>Clique em Meu perfil e na tela meu pefil clique em documentos</p>
  <a class="btn btn-primary btn-lg" href="../Telas/meu_perfil.php" role="button">Meu perfil</a>
</div>
        </div>
    </div>
    </div>

<?php }else{ ?>

    <div class="container">
    <div class="row espaco-padrao">
        <div class="col-md-12">
    <div class="jumbotron">
  <h1 class="display-4">Seus documentos foram REPROVADOS</h1>
  <p class="lead">Envie novamente seus documentos</p>
  <hr class="my-4">
  <p>Clique em Meu perfil.Na tela meu pefil clique em documentos e veja o motivo da reprovação!</p>
  <a class="btn btn-primary btn-lg" href="../Telas/meu_perfil.php" role="button">Meu perfil</a>
</div>
        </div>
    </div>
    </div>

<?php } ?>
</div>

</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>
    var contador = 0;
    var limite = 3;

            $(function campos() {
            var scntDiv = $('#dynamicDiv');
            $(document).on('click', '#addInput', function campos(event) {
                event.preventDefault();
                if (contador < limite) {
                $('<p>' +
                    '<input type="text" id="chuchu" class="form-control btc" name="quantidade[]" size="20"  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);
                    contador++; // incremento do contador
        }
                return false;
            });

            var scntDiv1 = $('#dynamicDiv1');
            $("#addInput1").on('click', function campos() {
                if (contador < limite) {
                $('<p>' +
                    '<input type="text" id="dynamicChuchu" class="form-control" name="carteira[]" size="20"  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);
                    contador++; // incremento do contador
        }
                return false;
            });
            $(document).on('click', '#remInput1', function campos() {
                $(this).parents('p').remove();
                return false;
            });
            var scntDiv2 = $('#dynamicDiv2');
            $("#addInput2").on('click', function campos() {
                if (contador < limite) {
                $('<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);
                    contador++; // incremento do contador
        }
                return false;
            });
            $(document).on('click', '#remInput2', function campos() {
                $(this).parents('p').remove();
                return false;
            });

            $(document).on('click', '#remInput', function campos() {
                $(this).parents('p').remove();
                return false;

            });
        });

        // $(document).on('submit', '#form1', function (event) {
        //     alert("Handler for .submit() called.");
        //     event.preventDefault();
        // });

        
    $(document).ready(function(){
        $('.btc').mask('0,00000000', {reverse: true});
    }
  );
 
    </script>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.