Dúvida Functions e Input

[Guest --Michelle --]

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>

[Jonathan Queiroz]

Usa a função onchange no campo "idade"

Sempre que a data de nascimento for modificada, o campo idade também será

Aí você vê se o campo idade é menor que 21 e habilita (ou desabilita) as outras caixas de texto