Nesse post irei mostrar como adicionar, remover e enviar campos dinamicamente através de Jquery.
Arquivo index.php
<!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 campos dinâmicos</title>
</head>
<style type="text/css">
body{ margin:0;
padding:0;
background-color:#09C;
font-family:Arial, Helvetica, sans-serif;
}
h1 { text-align:center; color:#FFF;}
#conteudo {width:980px; margin:0 auto;}
label{display:block; padding:2px; color:#FFF;}
input { border:#333 1px solid; padding:5px;}
.adicionar {background-color:#FC0; padding:5px; border:1px solid #000; cursor:pointer; font-size:11px; font-weight:bold; margin:5px;}
.remover{background-color:#C00; padding:5px; border:1px solid #000; cursor:pointer; font-size:11px; font-weight:bold; color:#FFF;margin:5px;}
#agenda{ color:#FFF; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// coloca o foco no campo nome assim que carregar a página
$("#nome").focus();
// Adiciona o campo telefone
$(".adicionar").live('click', function(){
$("#telefone").append("<p><label>Telefone</label><input type='text' class='fone' name='fone[]' size='15' /><span class='remover'>Remover telefone</span></p>");
return false;
})
// Remove o campo de telefone selecionado
$(".remover").live('click', function(){
var id = $(".remover").index(this);
$(".remover").eq(id).parent().slideUp('fast', function() {
$(this).remove();
})
})
$("#btEnviar").live('click', function(){
var dados = $("#formulario").serialize();
$.ajax({
type: "POST",
url: 'dados.php',
data: dados,
success: function(data)
{
$("#agenda").html(data);
}
})
return false;
})
})
</script>
<body>
<div id="conteudo">
<h1>Inserindo Campos Dinâmicos com Jquery</h1>
<form method="post" id="formulario">
<p><label>Nome</label><input type="text" class="nome" name="nome" size="60" /></p>
<div id="telefone">
<p><label>Telefone</label><input type="text" class="fone" name="fone[]" size="15" /><span class="adicionar">Adicionar telefone</span></p>
</div>
<p><input type="submit" value="Enviar" id="btEnviar" name="btEnviar" />
</form>
<div id="agenda"></div>
</div>
</body>
</html>
Explicação detalhada da parte relacionada ao Jquery
Linha 27: quando um elemento com a classe adicionar for clicado
Linha 28: adiciona à div telefone o campo telefone. O append adiciona ao final da div.
Linha 29: Usado para não submeter o formulário
Linha 32: quando um elemento com a classe remover for clicado
Linha 33: declara a variavel id guardando nela o index do item clicado
Linha 34: Faz uma animação slideUp, e em seguida remove o elemento pai clicado (no caso removeria a tag <p>
inteira anterior ao item clicado. ex: <p><label>telefone:</telefone><input type=text ...></p> ...
Linha 38: quando o elemento com o id btEnviar for clicado
Linha 39: Serializa o formulário e guarda na variável dados.
Linha 40: Executa um AJAX e inicia a declarações das opções desse metodo.
Linha 41: Define o tipo de requisição como POST.
Linha 42: Define a url que será requisitada que será dados.php
Linha 43: Define os parâmetros para o AJAX, no nosso caso os dados será a variável dados que foi serializado.
Linha 44: Define que quando a requisição for concluída, deverá ser executada a seguinte função
Linha 46: Preenche a div #agenda com o conteúdo retornado pelo metodo ajax
Arquivo dados.php
<?php
echo "<p><strong>Nome: ".$_POST['nome']."</strong></p>";
echo "<p><strong>Telefone(s):</strong></p>";
foreach($_POST['fone'] as $fone)
{
echo "<p>".$fone."</p>";
}
?>
Explicação detalhada da parte relacionada ao PHP do arquivo dados.php
Linha 1: abre a TAG informando que o código abaixo é linguagem PHP
Linha 2: executa o comando echo mostrando o nome preenchido no formulário
Linha 4: executa o comando foreach mostrando os telefones inseridos no formulário
Veja funcionando através do link abaixo
http://medinafestas.com/rodrigozem/campo_dinamico/
Link para download dos arquivos
http://medinafestas.com/rodrigozem/campo_dinamico/campo_dinamico.rar
muito obrigado hein, que grande exemplo, me ajudou muito aqui e acredito que muitas outras pessoas. valeu!
ResponderExcluir