Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Adilson_Web_2007

Formulário Dinâmico com Jquery

Por , em Javascript

Recommended Posts

Adilson_Web_2007    0

Adilson_Web_2007
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Adilson_Web_2007    0

Adilson_Web_2007
Postado

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();
}						
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Adilson_Web_2007    0

Adilson_Web_2007
Postado

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();  
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Adilson_Web_2007    0

Adilson_Web_2007
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Adilson_Web_2007    0

Adilson_Web_2007
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Adilson_Web_2007    0

Adilson_Web_2007
Postado

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();

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

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 ..

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito