Duplicar Elementos Dinamicamente com Jquery

07/10/2016
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
<!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