Ir para conteúdo

POWERED BY:

Arquivado

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

*Michelle*

onClick??

Por , em Javascript

Recommended Posts

*Michelle*    0

*Michelle*
Postado

Olá pessoal,

Estou com uma dúvida bem idiota, na verdade. Estou precisando colocar uma validação em 2 inputs texto e não sei qual function usar.

 

Primeiro, eu tenho um campo "Data de Nascimento" e um "Idade", onde o campo Idade calcula automaticamente o valor de acordo com a data digitada. Até aí, beleza, funciona perfeitamente.

Mas acontece que eu tenho outra function para habilitar ou não 2 campos "Nome do Responsável" e "CPF do Responsável" que só podem ser habilitados se a idade calculada for menor que 21.

 

Eu tentei fazer colocando nos inputs a opção onclick. Funciona, mas ainda dá tempo da pessoa digitar alguma coisa até o campo desabilitar.

Eu queria que logo que a idade fosse calculada, esses campos já desabilitassem entenderam? Sem dar opção da pessoa digitar alguma coisa.

 

Se alguém puder me ajuda....

 

O script:

<script>
function calcula_idade(data){
var array_data = data.split("/")
var ano = eval(array_data[2]);
var mes = eval(array_data[1]);
var dia = eval(array_data[0]);
var data = new Date(ano, mes-1, dia);
var data_atual=new Date();
var decimal = 0;

unidade=1000*60*60*24*30*12;
decimal=(decimal<=0)? 1 : decimal*10;

yearspast=data_atual.getFullYear()-ano-1;
valid=(data_atual.getMonth()>mes-1 || data_atual.getMonth()+1==mes || data_atual.getMonth()==mes-1 && data_atual.getDate()>=dia)? 1 : 0

data.setFullYear(data_atual.getFullYear())
data2=new Date(data_atual.getFullYear()-1, mes-1, dia)
valid=(valid==1)? valid+Math.floor((data_atual.getTime()-data.getTime())/(unidade)*decimal)/decimal : Math.floor((data_atual.getTime()-data2.getTime())/(unidade)*decimal)/decimal

document.getElementById("txtIdade").value = yearspast+valid;
}


function habilitaCampo(txtIdade){
	if (txtIdade >= "20"){
		document.getElementById('nomeresp').disabled = true;
		document.getElementById('nomeresp').style.background='#EEEEEE'
	document.getElementById('cpfresp').disabled = true;
		document.getElementById('cpfresp').style.background='#EEEEEE'
	}else{
	document.getElementById('nomeresp').disabled = false;
		document.getElementById('nomeresp').style.background='#FFFFFF'
	document.getElementById('cpfresp').disabled = false;
		document.getElementById('cpfresp').style.background='#FFFFFF'
	}
}

</script>

HTML:

<table width="560" align="center" cellspacing="0" class="form_texto">
	 <tr>
		<td width="66%">
		<p class="form_texto">Nome:<br>
		<input name="" id="" class="form_campo" size="40" style="TEXT-TRANSFORM: uppercase; WIDTH: 350px; HEIGHT: 18px">
		</p></td>

		<td width="24%">
		<p class="form_texto">Data de Nasc.:<br>
		<input type="text" ID="data" style="WIDTH: 120px; HEIGHT: 18px" onBlur="calcula_idade(this.value)">
		</p></td> 		
		
		<td width="10%">
		<p class="form_texto">Idade:<br>
		  <input type="text" readonly ID="txtIdade" style ="WIDTH: 50px; HEIGHT: 18px">
		</p></td> 		
	 </tr>
	</table>

[...]

			  <table width="560" align="center" cellspacing="0" class="form_texto">
		<tr>
				<td width="67%"><p class="form_texto">Nome do Responsável:
					<span class="style1">*</span>
				  <input name="nomeresp" id="nomeresp" class="form_campo" size="15" onClick="habilitaCampo(this.value)" style="TEXT-TRANSFORM: uppercase; WIDTH: 350px; HEIGHT: 18px" 
	 >
					<br>
			  </p></td>

			  <td width="33%"><p class="form_texto">CPF:<i></i> <span class="style1">*</span><br>
			<input name="cpfresp" id="cpfresp" class="form_campo" size="25" onClick="habilitaCampo(this.value)" style="WIDTH: 129px; HEIGHT: 18px">
		</p></td>		 
	</tr>				  
	   </table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Experimenta chamar a função de habilitar/desabilitar os campos, na função que faz o cálculo da idade:

function calcula_idade(data){
var array_data = data.split("/")
var ano = eval(array_data[2]);
var mes = eval(array_data[1]);
var dia = eval(array_data[0]);
var data = new Date(ano, mes-1, dia);
var data_atual=new Date();
var decimal = 0;

unidade=1000*60*60*24*30*12;
decimal=(decimal<=0)? 1 : decimal*10;

yearspast=data_atual.getFullYear()-ano-1;
valid=(data_atual.getMonth()>mes-1 || data_atual.getMonth()+1==mes || data_atual.getMonth()==mes-1 && data_atual.getDate()>=dia)? 1 : 0

data.setFullYear(data_atual.getFullYear())
data2=new Date(data_atual.getFullYear()-1, mes-1, dia)
valid=(valid==1)? valid+Math.floor((data_atual.getTime()-data.getTime())/(unidade)*decimal)/decimal : Math.floor((data_atual.getTime()-data2.getTime())/(unidade)*decimal)/decimal

document.getElementById("txtIdade").value = yearspast+valid;
habilitaCampo(document.getElementById('txtIdade').value); /* aqui */
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

*Michelle*    0

*Michelle*
Postado

William, desculpe mas eu não entendi direito.

 

Nesse caso, o IF eu teria que colocar também embaixo do habilitaCampo?

E no input eu coloco: onClick="habilitaCampo(this.value)" ou onClick="calcula_idade(this.value)" ??

Compartilhar este post

Link para o post
Compartilhar em outros sites

*Michelle*    0

*Michelle*
Postado

Ok, já entendi.

Burrice minha rsrsrsrsrs

Eu não tinha entendido direito o que você tinha escrito haha

 

Agora funciona, sendo que desabilita os campos do mesmo jeito, sem se importar com a idade.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

^^ Tranquilo... eu escrevi "meio resumido" mesmo, acho que não ficou claro.

mas então conseguiu resolver?

 

Veja que por chamar a função dentro da outra, assim que você der o "onBlur", vai testar as condições da idade >=20, e daí vai fazer oque você quer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

*Michelle*    0

*Michelle*
Postado

William, o problema é que tá funcionando pra quando a idade é maior que 21. Aí ele desabilita direitinho.

Mas quando a idade é menor, ele também está ficando desabilitado.

 

Eu coloquei onBlur em vez de onClick. Tá certo assim?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Na verdade, você não precisa mais chamar a função nos inputs "cpf e nome" responsável.

Ficaria assim o código completo:

<head>
<script>
function calcula_idade(data){
var array_data = data.split("/")
var ano = eval(array_data[2]);
var mes = eval(array_data[1]);
var dia = eval(array_data[0]);
var data = new Date(ano, mes-1, dia);
var data_atual=new Date();
var decimal = 0;

unidade=1000*60*60*24*30*12;
decimal=(decimal<=0)? 1 : decimal*10;

yearspast=data_atual.getFullYear()-ano-1;
valid=(data_atual.getMonth()>mes-1 || data_atual.getMonth()+1==mes || data_atual.getMonth()==mes-1 && data_atual.getDate()>=dia)? 1 : 0

data.setFullYear(data_atual.getFullYear())
data2=new Date(data_atual.getFullYear()-1, mes-1, dia)
valid=(valid==1)? valid+Math.floor((data_atual.getTime()-data.getTime())/(unidade)*decimal)/decimal : Math.floor((data_atual.getTime()-data2.getTime())/(unidade)*decimal)/decimal

document.getElementById("txtIdade").value = yearspast+valid;
habilitaCampo(document.getElementById('txtIdade').value); /* aqui */
}


function habilitaCampo(txtIdade){
	if (txtIdade >= "20"){
		document.getElementById('nomeresp').disabled = true;
		document.getElementById('nomeresp').style.background='#EEEE00'
   	document.getElementById('cpfresp').disabled = true;
		document.getElementById('cpfresp').style.background='#EEEE00'
	}else{
	document.getElementById('nomeresp').disabled = false;
	document.getElementById('nomeresp').style.background='#FFFFFF'
   	document.getElementById('cpfresp').disabled = false;
		document.getElementById('cpfresp').style.background='#FFFFFF'
	}
}

</script>
<body>
  <table width="560" align="center" cellspacing="0" class="form_texto">
	 <tr>
		<td width="66%">
		<p class="form_texto">Nome:<br>
		<input name="" id="" class="form_campo" size="40" style="TEXT-TRANSFORM: uppercase; WIDTH: 350px; HEIGHT: 18px">
		</p></td>

		<td width="24%">
		<p class="form_texto">Data de Nasc.:<br>
		<input type="text" ID="data" style="WIDTH: 120px; HEIGHT: 18px" onBlur="calcula_idade(this.value)">
		</p></td>		 
		
		<td width="10%">
		<p class="form_texto">Idade:<br>
		  <input type="text" readonly ID="txtIdade" style ="WIDTH: 50px; HEIGHT: 18px">
		</p></td>		 
	 </tr>
	</table>

[...]

			  <table width="560" align="center" cellspacing="0" class="form_texto">
		<tr>
				<td width="67%"><p class="form_texto">Nome do Responsável:
					<span class="style1">*</span>
				  <input name="nomeresp" id="nomeresp" class="form_campo" size="15" style="TEXT-TRANSFORM: uppercase; WIDTH: 350px; HEIGHT: 18px" 
	 >
					<br>
			  </p></td>

			  <td width="33%"><p class="form_texto">CPF:<i></i> <span class="style1">*</span><br>
			<input name="cpfresp" id="cpfresp" class="form_campo" size="25" style="WIDTH: 129px; HEIGHT: 18px">
		</p></td>		 
	</tr>				  
	   </table>

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