Pass and receive field id by parameter

Question

I have this html code:

<input type="radio" name="resultado" value="Y" onclick="habilitaCampo(this.value)">Aprovado 
<input type="radio" name="resultado" value="N" onclick="habilitaCampo(this.value)">Recusado<br> 
<input type="text" id="data_validade" name="data_validade" size="15" maxlength="10" disabled="disabled" onKeyPress="mascara_data(this,event);"/>

And the javascript function:

function habilitaCampo(valor){  
  if(valor == "Y"){     
    document.getElementById("data_validade").disabled = false;  
    document.getElementById("data_validade").focus();
  }
  else{     
    document.getElementById("data_validade").disabled = true;           
  }
}   

to enable or disable the field expiration date. But I wanted to pass the id of the field as parameter and be able to use this function in other fields, because I am creating several equal and unnecessary functions, and I can’t pass and receive the value correctly. Can you help me in this matter?

Answer 1

In the case of the HTML you have, you could simplify and send the state directly once each radio has its own function invocator.

function habilitaCampo(estado, id) {
  var el = document.getElementById(id);
  el.disabled = !estado;
  if (estado == true) el.focus();
}

<input type="radio" name="resultado" onclick="habilitaCampo(true, 'data_validade')">Aprovado
<input type="radio" name="resultado" onclick="habilitaCampo(false, 'data_validade')">Recusado<br>
<input type="text" id="data_validade" name="data_validade" size="15" maxlength="10" disabled="disabled" onKeyPress="mascara_data(this, event);" />

This implies that the function habilitaCampo is accessible to the global scope, ie. which you have for example in the HTML file inside a tag <script> and outside any other function.

---

Another way, since you say you are repeating code, would be to do without Javascript inline. With .addEventListener in an organized way to save code:

function ativador(nome, id) {
  var el = document.getElementById(id);
  [].forEach.call(document.getElementsByName(nome), function(radio) {
    radio.addEventListener('click', habilitaCampo.bind(radio, el));
  });
}

function habilitaCampo(el) {
  el.disabled = this.value == 'N';
  if (!el.disabled) el.focus();
}

ativador('resultadoA', 'data_validadeA');
ativador('resultadoB', 'data_validadeB');

input {
  display: block;
}

<input type="radio" name="resultadoA" value="Y">Aprovado
<input type="radio" name="resultadoA" value="N">Recusado<br>
<input type="text" id="data_validadeA" name="data_validade" size="15" maxlength="10" value="10-5-1998" disabled="disabled" onKeyPress="mascara_data(this,event);" />

<hr>

<input type="radio" name="resultadoB" value="Y">Aprovado
<input type="radio" name="resultadoB" value="N">Recusado<br>
<input type="text" id="data_validadeB" name="data_validade" size="15" maxlength="10" value="10-5-1998" disabled="disabled" onKeyPress="mascara_data(this,event);" />

Answer 2

So I believe it should work Thiago:

    function habilitaCampo(valor, id){  
        if(valor == "Y"){     
          document.getElementById(id).disabled = false;  
          document.getElementById(id).focus();
        }
        else{     
          document.getElementById(id).disabled = true;           
        }
    } 

<input type="radio" name="resultado" value="Y" onclick="habilitaCampo(this.value, 'data_validade')">Aprovado 
    <input type="radio" name="resultado" value="N" onclick="habilitaCampo(this.value, 'data_validade')">Recusado<br> 
    <input type="text" id="data_validade" name="data_validade" size="15" maxlength="10" disabled="disabled" onKeyPress="mascara_data(this,event);"/>

Edited: I switched to code block for better viewing and testing.