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.
Excelente post, muitas pessoas perguntavam como fazer com vários campos.
Muito bom o post, parabéns!
ótimo post ajudou bastante na parte de um projeto que estou desenvolvendo. Parabéns.
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
Para recuperar os dados:
if ($_POST){
$tels = $_POST[‘telefone’];
$quant_linhas = count($tels);
for ($i=0; $i<$quant_linhas; $i++) { echo "Telefones: ".$tels[$i]."
“;
}
}
-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?
veja se este link te ajuda: http://jsfiddle.net/JF38y/13/
Muito Obrigado, sem a sua ajuda seria difícil fazer minha lista de compras….
Olá,
Excelente script.
Como posso fazer para somar os valores e exibir no final do código o total.
Agradeço um retorno.
Muito Top precisava deste script
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
Olá Rodrigo.
Segue solução:
Tiago esse seu codigo ta de parabens, estou conseguindo usar em meu banco perfeitamente. Porem me surgiu uma duvida, como posso criar uma validação em javascript para os arrays ?
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?
Ok, descobri:
novoCampo.find(“select”).val(“”);
Valeu!
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?
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!
Isso mesmo!!
Valew Tiagão!!
abraço!
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”.
A function incluir, ficou legal, funcionando bem, agora o remover, ele remove todos os campos.
Olá! Muito bom o seu post. Precisava de algo assim.
Será que poderia me ajudar a colocar estes campos em uma bando de dados MySql, é possível? Não consegui fazer com pegassem o valor, das diferentes linhas.
Abraços
Gostaria de saber como fazer para que os dados fossem para uma base de dados em mysql
Olá José.
Segue exemplo de como inserir os dados no banco.
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.
E se eu quisesse adicionar ou remover campos usando atalhos do teclado? Alguma solução? Desde já agradeço.
Show de bola esse Script, mas tenho uma dúvida.
Estou inserindo itens em um pedido.
Então o primeiro item a ser adicionado eu quero colocar código do item = 1, quando clicar no Adicionar, o próximo item terá o código 2.
Até fiz um input para isso:
Mas vamos supor que o cara adiciona o item 1, o item 2 e o item 3.
E ele exclui o item 2, ficando só o item1 1 e 3.
Como faço para o item 1 fica com o código 1 e o item 3 que estava com o código 3, agora ficar com o código 2 ?
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…
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:
– foi trocado unbind() por off()
– foi trocado bind() por on()
– trocado $(“.adicionarCampo”).click(function (){ por $(“.adicionarCampo”).on(“click”, function (){
Boa noite Tiago e Luciano,
Tiago, primeiramente parabéns pelo site, para quem tá começando agora, percebe que, através do seu exemplo, javascript deve fazer parte do arsenal do desenvolvedor.
Bem, sobre o problema que o Luciano relatou, na versão antiga do seu código, funcionava corretamente enviar os dados para outra página.
Outra coisa, nos meus parcos conhecimentos tentei estender a função para criar uma que quando resetasse o formulário, apagasse também os campos adicionados, mas acabou apagando ou a tabela toda ou a página toda. Então Tiago, como conseguiria atraves do reset do form apagar também as as linhas adicionadas ?
Cara, muito obrigado por compartilhar seu conhecimento!
Grande abraço,
André
Pô, é Tiago e não Luciano, confundi as boletas…hehe
abraços
Muito bom.
Estou usando este código em uma aplicação e estou tendo problemas com inputs do tipo radio com “name” ex:name=’valor’ igual em todos e value em branco.
Por exemplo, se eu gerar uns cinco campos dinamicamente e enviar para banco de dados eu queria que o campo que o radio selecionado enviasse o value 1 e os radios não selecionados enviasse o value 0 para o banco.
Por favor, como posso fazer isso?
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??
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
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??
Ola, mto bom o post, gostaria de saber com fazer ele clonar o campo de data usando o Datepicker, o primeiro campo funcionar normal, porem qndo clono ele não traz a classe do datepicker.
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….
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
Ola, como faço para utilizar somente as funções de calulo e maskara!
Obrigado!
Muito bom o tutorial, parabéns.
Surgiu uma dúvida, no meu projeto tenho a mesma “tabela1” do seu tutorial, porém com um campo de busca, que faz a busca na tabela de produtos cadastrados no banco. Gostaria de que quando listo e seleciono os produtos desejados eles fossem parar nas linhas dessa “tabela1” inicial.
Estou iniciando em js, suas dicas estão sendo de grande ajuda.
Obrigado
Opa sou novo na area mais seu formulario não envia os dados para o email
Cara na boa, o malandro faz um post e bota o exemplo pra neguim comprar?
Foi deixado um exemplo que tem ajudado vários programadores.
A compra do script, com muitos outros recursos, é uma opção.
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.
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 ?
Bom dia, parabéns pelo script, muito bom.
Uma dúvida, caso eu precise cadastrar no BD, se todos os inputs forem dinâmicos é fácil, porém se eu tiver 2 ou mais inputs fixos e 2 ou mais dinâmicos no mesmo form , como proceder no insert ?
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.