Duplicar Elementos Dinamicamente com Jquery
Galera fiz formulário e preciso que ele duplique seus respectivos campos ao clicar nos botões.
Link do Exemplo do Formulário
Link de um pequeno vídeo explicativo
Código
Link do Exemplo do Formulário
Link de um pequeno vídeo explicativo
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
Curtidas 0