Ir para conteúdo

Arquivado

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

Bru_ce

Problema com jQuery

Por , em Javascript

Recommended Posts

Bru_ce    53

Bru_ce
Postado

Boa Noite Amigões,

estou com um probleminha, aqui rs

Seguinte, o usuário irá colocar o seu nome, nome do amigo, telefone e o celular.

Quando ele clicar no sinal de +, vai inserir mais 3 campos (Amigo, Telefone e Celular), o problema que a Máscara que coloquei não funciona nos campos inseridos via "botãozinho +".

 

Link: Clique aqui

 

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>
<style type="text/css">
@import url('css/style.css');
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js"></script>
<script type="text/javascript">
	jQuery(function($){
	$('#telefone').mask('(99) 9999-9999');
	$('#celular').mask('(99) 99999-9999');
	$(".adicionarCampo").click(function () {
	novoCampo = $(".amigos p.contato:first").clone();
	novoCampo.find("input").val("");
	novoCampo.insertAfter(".amigos p.contato:last");
	removeCampo();
	});
	$("#add").css({
		opacity: 0.5	
	});
	$("#add").hover(function(){
	$(this).fadeTo("slow", 1);
	},function(){
	$(this).fadeTo("slow", 0.5);
});
});
</script>

</head>
<body>
<div id="ribbon">
</div>
<form name="mask-form" id="mask-form">
<p> </p>
   <label>Aluno</label>
   <input type="text" value="Qual seu Nome ?" name="nome" />
   <div class="amigos">
       <p class="contato">
       	<label>Amigo</label>
           <input type="text" value="Quem vai Indicar ?" name="amigo[]" />
       	<label>Telefone</label>
       	<input type="text" name="telefone[]" id="telefone" />
           <label>Celular</label>
       	<input type="text" name="celular[]" id="celular" />
       </p>
</div>
   <a href="#" class="adicionarCampo" title="Novo Amigo"><img src="img/add.png" id="add" /></a>
   <button title="Enviar">Enviar</button>
   <div class="clear"></div>
</form>
</body>
</html>

 

Me ajudem Por Favor,

Vlw !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Primeiro, tem um problema pois você está duplicando IDs, isso é proibido. Use classe invés de ID para resolver isso.

O problema do plugin jquery.mask é que ele não usa o método live. Ou você procura um outro plugin, ou faz uma gambiarra assim:

$('.telefone, .celular').mask('(99) 9999-9999');
$(".adicionarCampo").click(function () {
   novoCampo = $(".amigos p.contato:first").clone();
   novoCampo.find("input").val("");
   novoCampo.insertAfter(".amigos p.contato:last");
   removeCampo();
   $('.telefone, .celular')
       .unmask() // Desabilita a máscara. Se não fizer isso dá problema
       .mask('(99) 9999-9999'); // Habilita novamente, pegando todos os campos criados 
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Henrique, muito Obrigado funcionou perfeitamente !

Agora você sabe como eu pegaria os campos com PHP ?

eu pegaria normal assim:

 

$telefone = $_POST['telefone'];

$celular = $_POST['celular'];

 

pois os campos são inseridos dinâmicamente ...

help novamente ! kk

 

Primeiro, tem um problema pois você está duplicando IDs, isso é proibido. Use classe invés de ID para resolver isso.

O problema do plugin jquery.mask é que ele não usa o método live. Ou você procura um outro plugin, ou faz uma gambiarra assim:

$('.telefone, .celular').mask('(99) 9999-9999');
$(".adicionarCampo").click(function () {
   novoCampo = $(".amigos p.contato:first").clone();
   novoCampo.find("input").val("");
   novoCampo.insertAfter(".amigos p.contato:last");
   removeCampo();
   $('.telefone, .celular')
       .unmask() // Desabilita a máscara. Se não fizer isso dá problema
       .mask('(99) 9999-9999'); // Habilita novamente, pegando todos os campos criados 
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Da mesma forma, entretanto, você terá um array, não uma string:

print_r($_POST['telefone']);

Saída

array(
0 => (99) 9999-9999
1 => (88) 8888-8888
...
)

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