Passing and receiving the field id by parameter

Question

Passing and receiving the field id by parameter

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

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 data_value field. But I wanted to pass the field id as a parameter and use this function in other fields, since I am creating several functions that are unnecessary, and I can not pass and receive the value correctly. Can you help me with this?

javascript

asked by anonymous 29.05.2017 / 22:31

2 answers

1

So I think Thiago should work:

    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 moved to the code block for better viewing and testing.

29.05.2017 / 22:46

How to modify link in PHP code [closed] $ .find () method in pure javascript

score 2 · Accepted Answer

In the case of HTML you have, you could simplify and send the state directly since 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 habilitaCampo function is accessible to the global scope, ie. which you have for example in the HTML file inside a <script> tag and outside of any other function.

Another way, since you say you're 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);" />