[Resolvido] Mascara em campos que podem se repetir

[visitante_xp 0]

Povo, é o seguinte...

 

To com dificuldade em colocar uma mascara em JQUERY em um campo que eu posso "multiplicar"...

 

Assim: Tenho o campo principal que leva o nome CNAE...

<input type="text" name="cnae[]" id="cnae" />

A mascara se guia pelo ID, quando eu faço isso direto o primeiro campo fica com a mascara, mas os outros não pegam.

 

Se eu coloco assim:

input type="text" name="cnae[]" id="cnae[]" />

Quando faço assim nenhum pega...(Ache que exagerei na parada do ID...^^)

 

Alguem ai ja usou uma mascara em um tipo de campo desses...??

 

Quem puder ajudar...Grato.

 

Abraço!!!

[William Bruno 1501]

Não pode repetir IDs numa mesma página.

Já tentou aplicar pelo name ?

 

<script type="text/javascript">
$(document).ready(function(){
	$("input[name='cnae[]']").mask("99.99");
});
</script>
<input type="text" name="cnae[]" />
<input type="text" name="cnae[]" />
<input type="text" name="cnae[]" />
<input type="text" name="cnae[]" />
<input type="text" name="cnae[]" />

imaginando que você esteja usando:

 

jquery.maskedinput.js

[visitante_xp 0]

Esse é o arquivo que multiplica os campos...

 

<script type="text/javascript">
var mainDivName = 'eventDates';

function addEvent()
{
var ni = document.getElementById(mainDivName);

var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;

var divIdName = "eventDate"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<table><tr><td width=80><input type='text' name='cnae[]' size='7' maxlength='9'></td></tr></table>CNAE "+num+" adicionada!    <a href=\"#\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remover CNAE</a>";


ni.appendChild(newdiv);

}

function removeEvent(divNum)
{
var d = document.getElementById(mainDivName);
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
</script>

Utilizo essa mascara msm...^^

Da Digitalbush...

 

Tentei mas num funfo... http://forum.imasters.com.br/public/style_emoticons/default/natal_dry.gif

$("input[name='cnae[]']").mask("9999-9/99");

To fazendo certo?

[William Bruno 1501]

hum.. você tá criando os inputs com Javascript.. isso quer dizer que eles não constam na marcação no momento do: $(document).ready()..

 

teria que atrelar a função dinâmicamente.. jQuery possui os métodos: live(), e bind() para esses casos.

Só não estou muito certo de como usar, já que tem mais um plugin envolvido na questão.

[srnetcave 1]

aplica utilizando class, class pode se repetir. No seu head tag, crie sua função primeiro, depois você chama.

<script type="text/javascript">
var mainDivName = 'eventDates';

function addEvent()
{
var ni = document.getElementById(mainDivName);

var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;

var divIdName = "eventDate"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<table><tr><td width=80><input class='suaclasse' type='text' name='cnae[]' size='7' maxlength='9'></td></tr></table>CNAE "+num+" adicionada!    <a href=\"#\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remover CNAE</a>";


ni.appendChild(newdiv);

}

function removeEvent(divNum)
{
var d = document.getElementById(mainDivName);
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}

$(document).ready(function(){
$('.suaclasse').mask('9999-9/99');
});
</script>

Acho que assim não terá problema.

[visitante_xp 0]

Entendi, vou dar uma olhada nessas dicas, e vouto a postar em breve... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[William Bruno 1501]

A class é totalmente desnecessária, e só vai sujar a marcação.

Aplique pelo name dos inputs, procure aproveitar o melhor do jQuery: os seletores

[Elaine Naomi 0]

Olá!!

Estou com o mesmo problema.

Não tinha conseguido fazer o script do ZF - Zend Freaker funcionar, mas eu adicionei um monte de campo com o mesmo nome de classe e funcionou.

 

Mas não consegui fazer funcionar no meu código.

 

Eu adiciono tres campos dinamicamente, seguindo o mesmo esquema do Alexandre Helmer da Paixão.

Exemplo: name="NomeCampo[]"

 

Eu clono os tres elementos, eles ficam com o atributo class ainda, mas a mascara não funciona mais.

 

Se alguem puder me ajudar.

 

Obrigada!!

[William Bruno 1501]

@Elaine Naomi a solucao eh:

hum.. você tá criando os inputs com Javascript.. isso quer dizer que eles não constam na marcação no momento do: $(document).ready()..

 

teria que atrelar a função dinâmicamente.. jQuery possui os métodos: live(), e bind() para esses casos.

 

[Elaine Naomi 0]

William, obrigada!

Vou dar uma pesquisada aqui.

 

valeu!!

[Elaine Naomi 0]

Funcionou mesmo colocando o bind na função!

 

Valeu!!

[visitante_xp 0]

@Naomi posta a parte que ta inserido o live() ou o bind() pra eu dar uma olhada por favor... ^_^

[Elaine Naomi 0]

Meu script é diferente mas a lógica é a mesma, ok?

 

Script

<script>
$(function () {

	function removeCampo() {

		$(".removerCampo").unbind("click");
		$(".removerCampo").bind("click", function () {
			i=0;
			$(".lista_faturas tr.fatura_campo").each(function () {
				i++;
			});
			if (i>1) {
				$(this).parent().parent().remove();
			}
		});
	}
	removeCampo();
	
	$(".adicionarCampo").click(function () {
		novoCampo = $(".lista_faturas tr.fatura_campo:first").clone();
		novoCampo.find("input").val("");
 	novoCampo.find(".moeda").bind('click',mask.money);
		novoCampo.find(".moeda").bind('keypress',mask.money);
		novoCampo.find(".data").mask("99/99/9999");
		novoCampo.insertAfter(".lista_faturas tr.fatura_campo:last");
		removeCampo();
	});
	

	
		
});


</script>

HTML

 

<table width="100%" cellpadding="2" cellspacing="2" class="lista_faturas" style="border-color:#CCCCCC; border-style:solid; border-width:1px;">
				<tr class="titulo">
 	<td width="14%" bgcolor="#CCCCCC">Numero Fatura</td>
 	<td width="15%" bgcolor="#CCCCCC">Vencimento</td>
 	<td width="16%" bgcolor="#CCCCCC">Valor</td>
 	<td width="55%" bgcolor="#CCCCCC">Funções</td>
 	</tr>
 
				<tr class="fatura_campo">
 	<td><input type="text" name="Faturas[numero][]" /></td>
 	<td><input type="text" name="Faturas[vencimento][]" class="data" /></td>
 	<td><input type="text" name="Faturas[valor][]" class="moeda" /></td>
					<td><a href="#box-faturas" class="removerCampo">Remover Campo</a></td>
 	</tr>
				</table>
				<p>
					<a href="#box-faturas" class="adicionarCampo">Adicionar Fatura</a>
				</p>
 	

 

Na onde tá

 

novoCampo.find(".moeda").bind('click',mask.money);

novoCampo.find(".moeda").bind('keypress',mask.money);

novoCampo.find(".data").mask("99/99/9999");

 

Não tinha antes.

 

O problema é que quando eu clonava o elemento, ele não aplicava a mascara.

 

=D

 

 

 

@Naomi posta a parte que ta inserido o live() ou o bind() pra eu dar uma olhada por favor... ^_^

 

[visitante_xp 0]

Opaaaa!!!

 

Reavivando o Tópico...hehe

 

O problema foi resolvido (a uma década a traz...)...

 

$('input[name="botao"]').live('click', function(){
  // Códigos...
});

Abraço!!!