Disable field if other is filled

1

I need to: If the Code field is empty, the Internal Code field can be enabled / empty as well, and if the code field is filled in the internal code field must be disabled (since the internal code is automatically filled in ).

But my code is doing the opposite, it only enables the internal code field after the code is filled. And another, I need to handle the error of case the user enter a value in the field Code and remove the value the field Internal code field is again disabled immediately, have that possibility?

    <script type="text/javascript">
var codigo = document.getElementById("codigo");	
var codigo_interno = document.getElementById("codigo_interno");


codigo.addEventListener('keyup', function() {
    codigo_interno.disabled = codigo.value.trim().length > 0;
});

  //agora uma função para keyup muito semelhante para o codigo_interno
codigo_interno.addEventListener('keyup', function() {
    codigo.disabled = codigo_interno.value.trim().length > 0;
});
</script>

<label>Código</label>
<input type="text" id="codigo">

<label>Código Interno</label>
<input type="text" id="codigo_interno">
    
asked by anonymous 26.10.2017 / 23:22

3 answers

0

You can simplify the logic you are using for a direct assignment, based on the comparison of the number of characters written in codigo . You can find out the number of characters by accessing length of value of field:

codigo_interno.disabled = codigo.value.length > 0;

So you have disabled in green if the size is greater than 0 and false otherwise. You can even avoid possible inadvertent spaces at the beginning and end by calling using the trim function to cut them:

codigo_interno.disabled = codigo.value.trim().length > 0;

I also advise you to use the onkeyup event to make it more interactive and change as you fill in, and register with Javascript to organize it better.

Example:

var codigo = document.getElementById("codigo");
var codigo_interno = document.getElementById("codigo_interno");

codigo.addEventListener('keyup', function() {//registo  é feito com addEventListener
  codigo_interno.disabled = codigo.value.trim().length > 0;
});
<label>Código</label>
<input type="text" id="codigo">

<label>Código Interno</label>
<input type="text" id="codigo_interno">

Note that I put the html fields search with getElementById out of the function because this is only done once.

Edit :

If you need the fields to be used alternatively, that is, typing in one will disable the other and vice versa, just apply a function similar to the codigo_interno field. This function will disable the codigo field if you have jobs written in codigo_interno :

var codigo = document.getElementById("codigo");
var codigo_interno = document.getElementById("codigo_interno");

codigo.addEventListener('keyup', function() {
  codigo_interno.disabled = codigo.value.trim().length > 0;
});

//agora uma função para keyup muito semelhante para o codigo_interno
codigo_interno.addEventListener('keyup', function() {
  codigo.disabled = codigo_interno.value.trim().length > 0;
});
<label>Código</label>
<input type="text" id="codigo">

<label>Código Interno</label>
<input type="text" id="codigo_interno">
    
27.10.2017 / 00:03
1

In your code it was already set to input internal_code to be disabled, so it would not change the status because you wanted to switch to a state that was already set.

document.getElementById("codigo").onblur = function() {libera()};
function libera() {
  var codigo = document.getElementById("codigo");
  var codigo_interno = document.getElementById("codigo_interno");

  if (codigo !== "") {
    codigo_interno.disabled = true;
    codigo_interno.value = "produto...";
  }
}
<label for="codigo">Código
<input type="text" id="codigo">
</label>
<label for="codigo_interno">Código Interno
<input type="text" id="codigo_interno">
</label>
    
26.10.2017 / 23:51
-2

Just modify:

if(codigo != ""){
    codigo_interno.disabled = false;
}

by

if(codigo != ""){
    codigo_interno.disable = false;
}

Property is wrong, just typing error

    
26.10.2017 / 23:35