Search code examples
javascripthtmldisabled-input

How to disable an input field using Javascript?


I'm starting with Javascript, I wrote this function:

function disableField() {
  if( document.getElementById("valorFinal").length > 0 ) ) {
    document.getElementById("cantidadCopias").disabled = true; 
  }
}

Which disables the second field named cantidadCopias if the first one is filled.

<label> <span>Valor final:</span>
  <input type="text" class="input_text" name="valorFinal" id="valorFinal" onkeydown="disableField()"/>
</label>
<label> <span>Cantidad de Copias:</span>
  <input type="text" class="input_text" name="cantidadCopias" id="cantidadCopias"/>
</label>

But it's not disabling the second field when the first one is filled.


Solution

  • Did you look at the console?

    • Uncaught SyntaxError: Unexpected token )
    • Uncaught ReferenceError: disableField is not defined

    First time you had a spelling error, now your code has an extra )

    function disableField() {
      if( document.getElementById("valorFinal").length > 0 ) ) {  <-- extra )
        document.getElementById("cantidadCopias").disabled = true; 
      }
    }​
    

    Now the next issue is you are not looking at the length of the value.

    if( document.getElementById("valorFinal").length > 0 )  <-- you are looking at the length of the HTML DOM Node.
    

    So the code should look like

    function disableField() {
      if( document.getElementById("valorFinal").value.length > 0 ) { 
        document.getElementById("cantidadCopias").disabled = true; 
      }
    }​
    

    but now how it is written, once it is disabled, it will not be re-enabled.

    function disableField() {
        var isDisabled = document.getElementById("valorFinal").value.length > 0; 
        document.getElementById("cantidadCopias").disabled = isDisabled;
    }​