JQuery: Adicionando linhas (inputs) dinamicamente

Olá pessoal!

Estamos entrando com mais post sobre JQuery.

O script a seguir é baseado no post do Maurício Faustino.

Vamos ao código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adicionando linhas dinamicamente</title>
<style type="text/css" media="all">
  body{ font-family:Arial, Helvetica, sans-serif }
  #tudo{ border:#CCCCCC 1px solid;width:680px;margin:0 auto }
  .bd_titulo{
    text-align:center;
    background-color:#CCCCCC;
    font-weight:bold
  }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
  function removeCampo() {
	$(".removerCampo").unbind("click");
	$(".removerCampo").bind("click", function () {
	   if($("tr.linhas").length > 1){
		$(this).parent().parent().remove();
	   }
	});
  }
 
  $(".adicionarCampo").click(function () {
	novoCampo = $("tr.linhas:first").clone();
	novoCampo.find("input").val("");
	novoCampo.insertAfter("tr.linhas:last");
	removeCampo();
  });
});
</script>
</head>
<body>
<form method="post" name="frm_campo_dinamico" action="">
<div id="tudo">
<table border="0" cellpadding="2" cellspacing="4">
  <tr><td colspan="4" class="bd_titulo">Adicionando Linhas Dinamicamente</td></tr>
  <tr><td colspan="4" align="center"><a href="http://www.linhadecomando.com" target="_blank">www.linhadecomando.com</a></td></tr>
 
  <tr><td class="bd_titulo" width="10">Qtde</td><td class="bd_titulo">Descrição</td><td class="bd_titulo">Cor</td><td class="bd_titulo">Valor R$</td></tr>
  <tr class="linhas">
    <td><input type="text" name="qtd[]" style="text-align:center" /></td>
    <td><input type="text" name="descricao[]" /></td>
    <td>
      <select name="cor[]">
        <option value="" selected="selected">Selecione uma cor...</option>
        <option value="Amarelo">Amarelo</option>
        <option value="Branco">Branco</option>
        <option value="Cinza">Cinza</option>
        <option value="Verde">Verde</option>            
      </select>
    </td>
    <td><input type="text" name="valor[]" style="text-align:center" /></td>
    <td><a href="#" class="removerCampo" title="Remover linha"><img src="images/minus.png" border="0" /></a></td>
  </tr>
  <tr><td colspan="4">
        <a href="#" class="adicionarCampo" title="Adicionar item"><img src="images/plus.png" border="0" /></a>
	</td></tr>
  <tr>
        <td align="right" colspan="4"><input type="submit" id="btn-cadastrar" value="Cadastrar" /></td>
  </tr> 
</table>
</form>
</div>
<?php 
 
if ($_POST){
   $qtd 	 = $_POST['qtd'];
   $descr 	 = $_POST['descricao'];
   $cor          = $_POST['cor'];
   $valor	 = $_POST['valor'];
   $quant_linhas = count($qtd);
 
   // exibindo os dados
   for ($i=0; $i<$quant_linhas; $i++) {
	echo  "Quantidade: ".$qtd[$i]."<br />";
	echo  "Descrição: ".$descr[$i]."<br />";
	echo  "Cor: ".$cor[$i]."<br />";
	echo  "Valor: ".$valor[$i]."<br />";
   }
 
   // para enviar por e-mail
   /* descomente aqui
   $mensagem = "";
   for ($i=0; $i<$quant_linhas; $i++) {
       $mensagem .=  "Quantidade: ".$qtd[$i]."<br />";
       $mensagem .=  "Descrição: ".$descr[$i]."<br />";
       $mensagem .=  "Cor: ".$cor[$i]."<br />";
       $mensagem .=  "Valor: ".$valor[$i]."<br />";
       $mensagem .=  "<hr>";
    }
   $destinatario = 'seu-email@seu-dominio.com.br';
   $subject	 = 'Assunto do Email';
 
   $header       = 'Content-type: text/html; charset=utf-8' . "\r\n";
   $header      .= 'From: linhadecomando.com <no-reply@linhadecomando.com>' . "\r\n";
 
   $envio = mail($destinatario, $subject, $mensagem, $header);
   if($envio){
      echo "Sua mensagem foi enviada com sucesso!";
   }else{
      echo "Ocorreu um erro ao enviar a mensagem. Tente novamente.";
   }
   */
}
?>
</body>
</html>

Veja o funcionando deste script, com mais funcionalidades, clicando aqui.

35 comentários em “JQuery: Adicionando linhas (inputs) dinamicamente

  • 5 de julho de 2011 em 13:43
    Permalink

    Muito bom o post, parabéns!

    Resposta
  • 27 de março de 2012 em 10:55
    Permalink

    ótimo post ajudou bastante na parte de um projeto que estou desenvolvendo. Parabéns.

    Resposta
  • 7 de julho de 2012 em 17:43
    Permalink

    OLá, gostei, me ajudou bastante, porém sou iniciante, vamos dizer que enviei 3 telefones. Como faço para recuperar esses 3 campos, e sendo possivel adicionar +2, na edição dos dados?

    sds

    Resposta
    • 13 de julho de 2012 em 23:31
      Permalink

      Para recuperar os dados:

      if ($_POST){
      $tels = $_POST[‘telefone’];
      $quant_linhas = count($tels);
      for ($i=0; $i< $quant_linhas; $i++) { echo "Telefones: ".$tels[$i]."
      “;
      }
      }

      Resposta
  • 7 de novembro de 2012 em 17:00
    Permalink

    -Pensando numa compra de produtos, onde tem a qtd, o valor unit., subtotal, ai add varias campos conforme prescisar (qtd, valor unit, produto), como consigo fazer este subtotal e um total geral destes campos add dinamicamente.
    -Outra dúvida, para alterar os dados deste for como seria dai?

    Resposta
  • 30 de janeiro de 2013 em 15:57
    Permalink

    Muito Obrigado, sem a sua ajuda seria difícil fazer minha lista de compras….

    Resposta
  • 13 de agosto de 2013 em 12:41
    Permalink

    Muito Top precisava deste script

    Resposta
  • 8 de setembro de 2013 em 16:55
    Permalink

    Amigo parabéns, perfeito post ajudou demais.

    Eu gostaria de enviar os dados que foram armazenados no ARRAY via e-mail, como posso fazer isso ?

    Obrigado
    Rodrigo

    Resposta
    • 17 de setembro de 2013 em 10:34
      Permalink

      Olá Rodrigo.

      Segue solução:

      <?php 
      // exibindo os dados
      if ($_POST){
        $qtd 		= $_POST['qtd'];
        $descr 	= $_POST['descricao'];
        $cor 		= $_POST['cor'];
        $valor	= $_POST['valor'];
        $quant_linhas = count($qtd);
       
        $mensagem = "";
        for ($i=0; $i<$quant_linhas; $i++) {
           $mensagem .=  "Quantidade: ".$qtd[$i]."<br />";
           $mensagem .=  "Descrição: ".$descr[$i]."<br />";
           $mensagem .=  "Cor: ".$cor[$i]."<br />";
           $mensagem .=  "Valor: ".$valor[$i]."<br />";
         }
         $destinatario = 'conta_de_email@dominio.com.br';
         $subject	 = 'Assunto do Email';
       
         mail($destinatario, $subject, $mensagem);
      }
      ?>
      Resposta
  • 28 de janeiro de 2014 em 8:36
    Permalink

    Muito bom mesmo. Estou tentando clonar um combobox com opções geradas por um foreach, mas o código não clona o que foi gerado por PHP. Como resolver?

    Resposta
  • 29 de janeiro de 2014 em 10:23
    Permalink

    Ok, descobri:

    novoCampo.find(“select”).val(“”);

    Valeu!

    Resposta
  • 4 de fevereiro de 2014 em 7:39
    Permalink

    Ok mas… como faço para adicionar um numero maior de linhas sem ficar clicando no botão +?

    tipo: em um campo adiciono o numero de linhas que quero, e depois clico que “gerar linhas”… isso em Jquery. tem como?

    Resposta
    • 5 de fevereiro de 2014 em 7:00
      Permalink

      Vamos lá.

      da linha 27 a 32 você altera para:

      $(“.adicionarCampo”).click(function () {
      var qtdLinhas = $(“#qtdLinhas”).val();
      for ( var i = 0 ; i < qtdLinhas ; i++ ) { novoCampo = $("tr.linhas:first").clone(); novoCampo.find("input").val(""); novoCampo.insertAfter("tr.linhas:last"); removeCampo(); } }); na linha 60, você adiciona:

      <input type="text" name="qtdLinhas" id="qtdLinhas" value="1" style="width:40px;" />

      Pronto!

      Resposta
  • 5 de fevereiro de 2014 em 13:57
    Permalink

    Isso mesmo!!

    Valew Tiagão!!

    abraço!

    Resposta
  • 21 de fevereiro de 2014 em 22:00
    Permalink

    Muito bom o script, alguém sabe como validar os campos duplicados?

    Consegui validar os campos não duplicados, mas se eu executar o cadastro sem nenhum produto, o php grava os campos em vazio, por isso preciso validar antes de enviar o POST. “Selecione pelo menos um produto”.

    Resposta
  • 7 de maio de 2014 em 13:20
    Permalink

    Gostaria de saber como fazer para que os dados fossem para uma base de dados em mysql

    Resposta
    • 8 de maio de 2014 em 9:03
      Permalink

      Olá José.

      Segue exemplo de como inserir os dados no banco.

      <?php 
      if ($_POST){
        $qtd 	 = $_POST['qtd'];
        $descr = $_POST['descricao'];
        $cor   = $_POST['cor'];
        $valor = $_POST['valor'];
        $quant_linhas = count($qtd);
        for ($i=0; $i<$quant_linhas; $i++) {
          $insert = "INSERT INTO NOME_TABELA (quantidade, descricao, cor, valor) VALUES ('$qtd[$i]', '$descr[$i]', '$cor[$i]', '$valor[$i]')";
          $resultado = mysql_query($insert) or die(mysql_error());
        }
      }
      ?>
      Resposta
  • 8 de maio de 2014 em 10:54
    Permalink

    Sou um um estatístico de formação quero descobrir novas formas de acesso aos dados e acho que com PHP poderei melhorar e de que maneira a produção estatística na minha instituição (ONG).Obrigado pela reposta.

    Resposta
  • 19 de maio de 2014 em 10:19
    Permalink

    E se eu quisesse adicionar ou remover campos usando atalhos do teclado? Alguma solução? Desde já agradeço.

    Resposta
  • 28 de maio de 2014 em 16:02
    Permalink

    Olá ! Tô com um problema… Não tô conseguindo recuperar os dados criados pelo input dinamico… aliás, só consigo a primeira linha… alguém poderia me ajudar…

    Resposta
    • 29 de maio de 2014 em 9:20
      Permalink

      Olá Luciano.

      Com o código que eu disponibilizei, só é possível pegar os dados dos inputs dinâmicos, se o submit for para a mesma página.

      Se os dados do submit forem enviados para outra página, você deve mudar o código e atualizar para versão mais nova do JQuery.

      ex:

      <form name="nome_do_formulario" action="outra_pagina.php" method="post">
      <input type="text" name="valor[] ">
      <input type="text" name="valor[] ">
      <input type="text" name="valor[] ">
      </form>

      – foi trocado unbind() por off()
      – foi trocado bind() por on()
      – trocado $(“.adicionarCampo”).click(function (){ por $(“.adicionarCampo”).on(“click”, function (){

      <script type="text/javascript">
      $(function(){
        function removeCampo(){
           $("removerCampo").off("click");
           $(".removerCampo").on("click", function (){
      	if($("tr.linhas").length>1){
      	  $(this).parent().parent().remove();
      	}
           });  
        }
       
        $(".adicionarCampo").on("click", function (){ 
          novoCampo = $("tr.linhas:first").clone();
          novoCampo.find("input").val("");
          novoCampo.insertAfter("tr.linhas:last");
          removeCampo();
        });
      });
      </script>
      Resposta
  • 14 de agosto de 2014 em 15:02
    Permalink

    Olá, muito bom o seu post…
    Porém… estou com um problema que é o seguinte:
    Eu faço um autocomplete Jquery para buscar os dados do banco de dados.
    só que eu só consindo realizar essa busca na primeira linha…

    como que eu faria no Javascript para ele gerar os inputs com o name tipo :

    <input type="text" name="descricao[$i]

    com um for contando uma variável “i” igual você fez no php??

    Resposta
  • 4 de setembro de 2014 em 16:25
    Permalink

    olá parabéns pelo artigo agora tenho uma dúvida…como identificar o campo clicado. Por exemplo ao selecionar a cor Amarelo da 3ª linha por exemplo e exibir um alert()…tentei com o Jquery $(“#id”).click….não dá certo valeu

    Resposta
  • 16 de setembro de 2014 em 15:08
    Permalink

    Olá Tiago!

    Estou com problemas quando eu coloco a função de autocompletar com jquery autocomplete no campo input!! O 1º campo funciona perfeitamente mas os demais já não funciona!! O ID do input não clona??

    Resposta
  • 29 de dezembro de 2014 em 17:17
    Permalink

    Tiago, me ajuda com esse exemplo seu ai por favor, veja eu preciso

    Seleciono o produto

    LÁPIS GRANDE
    QUANTIDADE: 10 UNIDADES
    VALOR R$
    DATA INICIAL VENDA: 30/12/2014
    DATA FINAL VENDA: 30/01/2015 (*não deixar o sistema vender após essa data)

    ai eu cadastro no banco de dados, adiciono nova line e passo para outro cadastro e por ai vai….

    Resposta
  • 14 de maio de 2015 em 22:17
    Permalink

    Muito bom!
    Seria mais interessante se ao clicar em adicionar ao invés de adicionar uma linha com os campos vazios, fosse adicionado e relacionado o(s) item(s).
    Percebi que isto não funciona com lista de seleção com 3 combos dinamicos, pois os demais apresentam a caracteristica do primeiro.
    Ainda gostaria que o valor unitário fosse atualizado automaticamente num campo somente leitura de acordo com o produto e tamanho selecionado nos comboboxs
    Alguem saberia fazer isso funcionar?
    Grato

    Resposta
  • 11 de agosto de 2015 em 16:07
    Permalink

    Ola, como faço para utilizar somente as funções de calulo e maskara!
    Obrigado!

    Resposta
  • 26 de abril de 2016 em 12:02
    Permalink

    Opa sou novo na area mais seu formulario não envia os dados para o email

    Resposta
  • 22 de junho de 2016 em 16:59
    Permalink

    Cara na boa, o malandro faz um post e bota o exemplo pra neguim comprar?

    Resposta
    • 22 de junho de 2016 em 17:46
      Permalink

      Foi deixado um exemplo que tem ajudado vários programadores.

      A compra do script, com muitos outros recursos, é uma opção.

      Resposta
    • 25 de agosto de 2016 em 17:18
      Permalink

      Po, o cara fez o script, postou de forma comentada, está dando suporte pro pessoal que pede ajuda e ainda é chamado de malandro?
      Tem que colocar o script a venda mesmo. Quem quiser os recursos básicos, usa o script do post. Quem quiser algo mais avançado, usa o script comprado. Nada mais justo.
      Eu, particularmente, achei o post pq estava com uma dúvida de jQuery. O post sanou minhas dúvidas e consegui implementar o exemplo usando outras funções em PHP e Banco de Dados.
      Quem não programa, compra o script.
      Parabéns pelo post, Thiago e Maurício Faustino;
      Abs.

      Resposta
  • 4 de outubro de 2016 em 12:22
    Permalink

    Boa tarde,

    muitoooooo bom, mas tenho um problema. Se eu tento cadastrar mais um novo campo e clico em cadastrar todos que já estavam cadastrados somem e aparece somente o novo cadastro.
    Como resolver para que a pessoa possa sempre cadastrar um novo input sem apagar os que já foram inclusos ?

    Resposta
  • 23 de julho de 2017 em 23:36
    Permalink

    Fala pessoal!
    Esse código me ajudou muito, mesmo usando ASP da para conseguir recuperar os dados da seguinte forma (caso alguém queira recuperar em outra página).

    Removendo o colchetes ‘[]’ os nomes dos inputs.
    Para manipular eles vocês podem salvar em uma variável.
    Exemplo, quero recuperar dado da descrição que está na terceira linha.

    ‘variável que vai receber as descrições dos itens
    descricao=Request.Form(“descricao”)

    Percebam que imprimindo dessa forma ela será separada por vírgula, então transformaremos ela em um array usando split

    descricao=split(descricao,”,”)

    Para recuperar o valor da terceira linha ficará assim

    descricao=descricao(“2”)

    ‘Sim numero 2 para recuperar a terceira linha, isso se deve que o array a primeira coluna inicia com o 0.

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *