onClick??

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>