Publicado em 6 de jun.

Formulário Dinâmico com Jquery

Amigos, boa tarde!

gostaria de saber se exite algum plugin de formulário dinâmico? Eu tenho 5 inputs text. E quando o focus sair do último quero salvar as informações no banco e automaticamente adicione novamente os campos do formulário.

Desde já eu agradeço.

Discussão (18)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Bru_ce· 6 de jun.

AJAX amigão !

Faça na mão, em umas 10 linhas você resolve isso, boa sorte. :yes:

Adilson_Web_2007· 6 de jun.

Tem como saber se o focus esta no último campo?

Bru_ce· 6 de jun.

Fiz algo para você, estude o código e incremente conforme necessita.

AJAX

var data = $("#formulario").serialize();
$.post("envia-dados.php", data, function(resposta){
$('#formulario').get(0).reset();
alert('Formulário Enviado, Obrigado.');
});

CÓDIGO

<!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>Documento sem título</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("[name='campo5']").blur(function(){

// no lugar deste alerta você coloca o ajax
alert("O CAMPO 5 PERDEU O FOCO"):

});
});
</script>
</head>

<body>
<form method="post" id="formulario">
CAMPO 1 <input type="text" name="campo1" /><br /><br />
CAMPO 2 <input type="text" name="campo2" /><br /><br />
CAMPO 3 <input type="text" name="campo3" /><br /><br />
CAMPO 4 <input type="text" name="campo4" /><br /><br />
CAMPO 5 <input type="text" name="campo5" /><br /><br />
</form>
</body>
</html>

Adilson_Web_2007· 6 de jun.

Obrigado pela força. Vou testar.

Bru_Ce, obrigado pela força. Esse html já me ajuda muito. Vou fazendo aqui e qualquer coisa eu volto a postar. valeu.

Bru_ce· 6 de jun.

Ok amigo.

Adilson_Web_2007· 6 de jun.

Bru_ce. Com o que você me passou e com o que eu pesquisei na internet, eu fiz conforme abaixo. Esta funcionando. Só que na hora de adicionar os novos campos, esta aparecendo mais tres linhas com o campos. ao invés de aparecer uma linha novo com os campos. O que poderia ser?

Valeu

HTML:

<form action="" method="post">

<fieldset>
 <legend>Telefones</legend>
 <div class="telefones">
	<p class="campoTelefone">
 <input type="text" onblur="Valor();" name="telefone0" class="pula" />
 <input type="text" onblur="Valor();" name="telefone" class="pula" />
 <input type="text" onblur="Valor();" name="telefone1" class="pula" />
 </p>
 </div>
</fieldset>
</form>

JavaScript:

function Valor()
{

 UltimoCampo();
}

function UltimoCampo(){
 $("[name='telefone1']").blur(function(){
 NovosCampos();
 });
}

function NovosCampos(){
 novoCampo = $(".telefones p.campoTelefone:first").clone();
 novoCampo.find("input").val("");
 novoCampo.insertAfter(".telefones p.campoTelefone:last");
 removeCampo();
}

function removeCampo() {
 i=0;
 $(".telefones p.campoTelefone").each(function () {
 i++;
 });
 if (i>1) {
 $(this).parent().remove();
}
}

Bru_ce· 6 de jun.

Conhece jQuery ?

Pelo o que eu vi, você esta misturando JS puro com jQuery, decide rs

Seu código esta UMA BAGUNÇA,

Segue

<!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>Documento sem título</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function Valor()

{

 UltimoCampo();
}

function UltimoCampo(){
 $("[name='telefone2']").blur(function(){
 NovosCampos();
 });
}

function NovosCampos(){
 novoCampo = $(".telefones p.campoTelefone:first").clone();
 novoCampo.find("input").val("");
 novoCampo.insertAfter(".telefones p.campoTelefone:last");
 removeCampo();
}

</script>
</head>

<body>
<form action="" method="post">

<fieldset>
 <legend>Telefones</legend>
 <div class="telefones">
<p class="campoTelefone">
 <input type="text" onblur="Valor();" name="telefone0" class="pula" />
 <input type="text" onblur="Valor();" name="telefone1" class="pula" />
 <input type="text" onblur="Valor();" name="telefone2" class="pula" />
 </p>
 </div>
</fieldset>
</form>
</body>
</html>

Adilson_Web_2007· 6 de jun.

Desculpe estou aprendendo. Deu certo. Eu vi que você deixou a chamada da função removeCampo(); Outra coisa que eu preciso de sua ajuda é que quando ele cria a linha com os campos o foco não fica. Tentei assim:

function NovosCampos(){
 novoCampo = $(".telefones p.campoTelefone:first").clone();
 novoCampo.find("input").val("");
 novoCampo.insertAfter(".telefones p.campoTelefone:last");
 $("[name='telefone0']").focus(); // Eu fiz assim e não deu certo.
 removeCampo();
}

Bru_ce· 6 de jun.

Uma dica amigo, estude a biblioteca jQuery.

Você esta escrevendo MUITO para fazer POUCO !

Não adianta eu fazer para você ou te "ensinar" a fazer, você tem que aprender quebrando a cabeça.

BOA SORTE e só volte aqui quando não saber mais o que fazer rs

Adilson_Web_2007· 6 de jun.

Obrigado.

Eu não quis te atrapalhar e nem muito menos que você faça meu trabalho.

Só perguntei! E se não puder perguntar então por que exite fórum?

Estou desde a hora do almoço pesquisando na internet e tentando fazer. Não consegui vim procurar ajuda. Somente isso.

Mais uma vez obrigado.

Bru_ce· 6 de jun.

Meu camarada, eu não disse para você não perguntar, aliás não mando em você.
Eu apenas quis ajudar, tanto que fiz o código para você, e quero que você aprenda.

"desde a hora do almoço .. "

Tem dias que eu fico para fazer determinada coisa rs

Bom, interprete minha resposta como desejar.

Abs

Adilson_Web_2007· 7 de jun.

Amigos, Estou tentando achar o problema desse código, porém não estou conseguindo.

É o seguinte estou clonando alguns campos através da tecla tab. Porém, ele cria a segunda linha. Quando o evento sai do último campo da segunda linha ele não cria as linha abaixo.

Se alguém puder dar uma luz. Eu ficarei ,muito grato.

Se fosse usar botão para criar os campos já estaria pronto. O problema é usar a tecla TAB. Não estou conseguindo.

<!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>Documento sem t?lo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
 $(function () {
 $(".pula1").bind("blur", function () {
 $("[name='telefone2']").blur(function(){
 $('.campoTelefone').clone().appendTo('.telefones');
 });
 });
});

</script>
</head>

<body>
<form action="" method="post">
<fieldset>
 <legend>Telefones</legend>
<div class="telefones">
	<p class="campoTelefone">
 <input type="text" name="telefone0" class="pula" />
 <input type="text" name="telefone1" class="pula" />
 <input type="text" name="telefone2" class="pula1" />
 </p>
</div>
</fieldset>
</form>
</body>
</html>

Bru_ce· 7 de jun.

Você esta chamando o evento blur duas vezes.

Adilson_Web_2007· 7 de jun.

hum verdade. Valeu. Vou modificar.

Então, eu mudei um pouco a função e adiciona somente uma linha nova. O que eu percebo é que o evento não vai para a próxima linha.

Mas se eu sair do último campo da primeira linha, ai funciona. Alguma dica?

Segue o código alterado.

$("[name='telefone2']").blur(function () {
 novoCampo = $(".telefones:first").clone();
 novoCampo.find("input").val("");
 novoCampo.insertAfter(".telefones:last");
});

Conseguir fazer. Usando o Live.

Segue o código:

$("[name='telefone2']").live('blur',function () {
 novoCampo = $(".telefones:first").clone();
 novoCampo.find("input").val("");
 novoCampo.insertAfter(".telefones:last");
});

Outra coisa que estou tentando fazer é colocar o foco no campo.

Tentei assim mas não deu certo:

novoCampo.find("input[name='telefone2']").focus();
novoCampo.find('input:text').last().focus();

Bru_ce· 7 de jun.

Tenta assim

novoCampo.find('input:text:last').focus();

OBS: acho que vai dar problema, pois quando os campos são gerados eles ficam com o mesmo nome.
Como você vai fazer para resgatar os dados deles ?

Caso não consiga, manda um mp para o wbruno http://forum.imasters.com.br/user/69222-william-bruno/

As vezes ele consegue te ajudar.

abs

Adilson_Web_2007· 7 de jun.

Blz.

Vou tentar obrigado mais uma vez.

Eu ainda não pesquisei sobre como resgatar os valores.

Bru_ce· 7 de jun.

Tem que pesquisar então, pois já pensou você demorar dias para resolver o problema de gerar o campo dinâmico e ver que não é possível fazer o que quer, tem que imaginar todas as possibilidades, imaginar que poder dar CERTO como pode dar MUITO ERRADO e você perder tempo á toa, não sei se isso é um projeto de trampo, ou frila, enfim ..

Adilson_Web_2007· 11 de jun.

Verdade. Você tem razão.

Obrigado pelas dicas.