0

Estou tentando implementar um botão para adicionar campos extras, no caso, estou criando um relatório de atividade onde contem 5 campos. Quando o botão é clicado ele adiciona mais 5 desses mesmo campo.

Atualmente tenho:

JavaScript

$(function () {
     var scntDiv = $('#dynamicDiv');
     $(document).on('click', '#addInput', function () {
          $('<p>'+
            '<input type="text" id="inputeste" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
            '</a>'+
            '</p>').appendTo(scntDiv);
                        return false;
      });
      $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});

HTML

<div id="dynamicDiv"></div>

Como eu retorno vários dias, e cada dia pode existir N tarefas, quando clico em adicionar campos, apenas no primeiro dia é adicionado, sendo que em cada dia tenho um botão.

EDIT 1:

No meu caso, tenho os dias gerados de forma dinâmica, e cada dia eu tenho um botão para adicionar, quando to no dia 21 por exemplo e clico adicionar, ele é adicionado normalmente, pois é meu primeiro campo, se to no dia 22 e clico para adicionar ele adiciona os campos no painel do dia 21.

inserir a descrição da imagem aqui

Como faço para saber em qual dia vou adicionar?

1
  • Imagem não ajuda em nada, postar o código é que pode ajudar!
    – user60252
    Commented 17/10/2017 às 14:41

3 Respostas 3

1

Editei seu script para fazer funcionar o botão. Quando você clicar em add +5, ele adiciona 5 inputs.

$(function () {
     var scntDiv = $('#dynamicDiv');
     $(document).on('click', '#addInput', function () {
          for (var i = 0; i < 5; i++){
            $('<p>'+
            '<input type="text" id="inputeste" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
            '</a>'+
            '</p>').appendTo(scntDiv);
           }
                        return false;
      });
      $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="addInput">add +5</button>
<div id="dynamicDiv"></div>

1

Creio que faltou adicionar name="inputeste[]" nos inputs para poder recuperá-los em uma aplicação!

Biblioteca

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Script

$(function () {
     var scntDiv = $('#dynamicDiv');
     $(document).on('click', '#addInput', function () {
          for (var i = 0; i < 5; i++){
            $('<p>'+
            '<input type="text" id="inputeste" name="inputeste[]" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true">remover</span> '+
            '</a>'+
            '</p>').appendTo(scntDiv);
           }
                        return false;
      });
      $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});

Exemplo obtendo os dados do formulário com PHP

O formulário

<form action="" method="post">
<button type="button" id="addInput">add +5</button>
<div id="dynamicDiv"></div>
<input type="submit">
</form>

PHP

if (isset($_POST['inputeste'])){

 $inputeste= $_POST['inputeste'];

   if (!empty($inputeste)) {                
       $qtd = count($inputeste);
       for ($i = 0; $i < $qtd; $i++) {
         if ($inputeste[$i]!=""){
            echo $inputeste[$i];
            echo "<br>";
         }

       }
   }
}

Caso não for usar o link remover use somente a parte do código necessária

$(function () {
     var scntDiv = $('#dynamicDiv');
     $(document).on('click', '#addInput', function () {
          for (var i = 0; i < 5; i++){
            $('<p>'+
            '<input type="text" id="inputeste" name="inputeste[]" size="20" value="" placeholder="" /> '+
            '</p>').appendTo(scntDiv);
           }
                        return false;
      });
});
2
  • Os meus dias são formados de forma dinâmica, como faço para adicionar o campo abaixo do meu dia?. Por exemplo, tenho dia 1, 2 e 3 que foram gerados de formas dinâmica, quando clico no painel do dia 1 e clico para adicionar, adiciona o campo normalmente no painel do dia 1, e quando clico no botão para adicionar no painel do dia 2, o campo adiciona no painel do dia 1. Deu pra entender? Commented 17/10/2017 às 12:42
  • Editei minha pergunta, e acrescentei uma imagem. Commented 17/10/2017 às 12:50
0

A solução foi tornar a minha div dinamica.

HTML

<div id="dynamicDiv<?php echo $_Indice ?>"></div>

JavaScript

$(function () {
     var dynamicDiv = ('#dynamicDiv');
     $(document).on('click', '.addInput', function () {
          var dynamicId = $(this).attr("id");
          $('<p>'+
            '<input type="text" name"inputteste[]" id="inputeste" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
            '</a>'+
            '</p>').appendTo(dynamicDiv + dynamicId);
            return false;
       });
       $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .