Duplicar Elementos Dinamicamente com Jquery
07/10/2016
0
Galera fiz formulário e preciso que ele duplique seus respectivos campos ao clicar nos botões.
[url:descricao=Link do Exemplo do Formulário ]http://www.premisesgestao.com.br/files/formulario.html[/url]
[url:descricao=Link de um pequeno vídeo explicativo ]http://www.premisesgestao.com.br/files/Formulario.html[/url]
Código
[url:descricao=Link do Exemplo do Formulário ]http://www.premisesgestao.com.br/files/formulario.html[/url]
[url:descricao=Link de um pequeno vídeo explicativo ]http://www.premisesgestao.com.br/files/Formulario.html[/url]
Código
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"> <title>Formulário Teste</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> body{font-size:14px;} .trecho{padding:5px; background:#F8F8F8; border: 1px solid #ccc;} #linha4{padding-top:5px; } #box-trecho{background: #eee; margin:5px; padding: 5px; border: 1px solid #ccc;} .passageiro{margin:5px; padding:5px; background: #F5F5F5; border: 1px solid #ccc;} #box-passageiro{margin:5px; padding:5px; background: #fff; border: 1px solid #ccc;} #titulos{padding: 5px; font-size:14px; font-weight:bold} #box-origem-destino{padding: 5px; font-size:16px; font-weight:bold} #box{background: #e22; padding: 25px; border: 1px solid #000;} </style> <script type="text/javascript"> $(document).ready(function() { var max_fields = 10; //max de 15 inscricoes de cada vez var x = 1; //Adiciona Passageiro $('#add-passageiro').click (function(e) { e.preventDefault(); //prevenir novos clicks if (x < max_fields) { $('#box-passageiro').append('\\ <div class="remove' + x + '">\\ <div id="box-passageiro-novo[' + x + ']">\\ <div class="passageiro" id="passageiro-item[' + x + ']">\\ <div id="titulos">Dados do Passageiro ...</div>\\ <div class="pas-0">\\ <input type="text" name="passageiro[' + x + ']" value="">\\ <input type="text" name="rg[' + x + ']" value="">\\ <input type="text" name="cpf[' + x + ']" value="">\\ <input type="Button" value="Remover" class="remove_passageiro" id="remove' + x +'">\\ </div>\\ </div>\\ </div>\\ </div>\\ '); x++; } }); //Remove passageiros $('#box-passageiro').on("click",".remove_passageiro",function(e) { e.preventDefault(); var tr = $(this).attr('id'); $('#box-passageiro div.'+ tr).remove(); x--; }); //Adiciona trecho $('#add-Trecho').click (function(e) { e.preventDefault(); //prevenir novos clicks if (x < max_fields) { $('.box').append('\\ <div class="remove' + x + '">\\ <div class="trecho" id="box-trecho">\\ <div id="linha1"><h3>TRECHO</h3></div>\\ <div id="box-origem-destino">\\ <label>ORIGEM:</label>\\ <input type="text" name="Orgiem[0]" value="Orgiem">\\ <label>DESTINO:</label>\\ <input type="text" name="Destino[0]" value="Destino">\\ </div>\\ <div id="box-passageiro">\\ <div class="passageiro" id="passageiro-item[0]">\\ <div id="titulos">Dados do Passageiro ...</div>\\ <div class="pas-0">\\ <input type="text" name="passageiro[0]" value="">\\ <input type="text" name="rg[0]" value="">\\ <input type="text" name="cpf[0]" value="">\\ </div>\\ </div>\\ </div>\\ <div class="ctrl-passageiro">\\ <input type="Button" value="+ Add Passageiro" id="add-passageiro"/>\\ <input type="Button" value="Ida e Volta" id="idaevolta"/>\\ </div>\\ </div>\\ </div>\\ '); x++; } }); }); </script> </head> <body> <div class="box"> <div class="trecho" id="box-trecho"> <div id="linha1"><h3>TRECHO</h3></div> <div id="box-origem-destino"> <label>ORIGEM:</label> <input type="text" name="Orgiem[0]" value="Orgiem"> <label>DESTINO:</label> <input type="text" name="Destino[0]" value="Destino"> </div> <div id="box-passageiro"> <div class="passageiro" id="passageiro-item[0]"> <div id="titulos">Dados do Passageiro ...</div> <div class="pas-0"> <input type="text" name="passageiro[0]" value=""> <input type="text" name="rg[0]" value=""> <input type="text" name="cpf[0]" value=""> </div> </div> </div> <div class="ctrl-passageiro"> <input type="Button" value="+ Add Passageiro" id="add-passageiro"/> <input type="Button" value="Ida e Volta" id="idaevolta"/> </div> </div> </div> <br> <div class="ctrl-trecho"> <input type="Button" value="+ Add Trecho" id="add-Trecho"/> </div> </body> </html>
Sidney Abreu
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)