How to disable an input field using Javascript?
Solution 1
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;
}
Solution 2
It is best if you use onkeyup()
instead of onkeydown()
. The problem is the value of the input is not updated on keydown event.
<label>
<span>Valor final:</span>
<input type="text" class="input_text" name="valorFinal" id="valorFinal" onkeyup="disableField(this.value)"/>
</label>
<label>
<span>Cantidad de Copias:</span>
<input type="text" class="input_text" name="cantidadCopias" id="cantidadCopias"/>
</label>
javascript
function disableField(val) {
var cantidadCopias = document.getElementById("cantidadCopias");
cantidadCopias.disabled = ( val.length > 0 );
}
Solution 3
the javascript:
var disableField = function () {
var state = document.getElementById("valorFinal").value.length > 0;
document.getElementById("cantidadCopias").disabled = state;
};
the html:
<label> <span>Valor final:</span>
<input type="text" class="input_text" name="valorFinal" id="valorFinal" onkeyup="disableField()"/>
</label>
<label> <span>Cantidad de Copias:</span>
<input type="text" class="input_text" name="cantidadCopias" id="cantidadCopias"/>
</label>
you should also enable it again when the input length is 0 again.
besides that you should hook onkeyup and not onkeydown.
you can try it here: jsfiddle.net/DBJfN/
JorgeeFG
Updated on October 02, 2020Comments
-
JorgeeFG over 3 years
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.
-
JorgeeFG over 11 yearsThanks, the onkeyup thing solved the problem I had with field not enabling until pressing Del key again (when it was empty).
-
GottZ over 11 yearsno problem. onblur could also be of interest for you in case someone clicks somewhere while holding a key down (before onkeyup got fired)
-
GottZ over 11 yearsconsole.log is not avilable in browsers without an attached debugger. (firefox or IE without an open dev console as example) besides that your whole answer has already been posted.
-
Bob over 11 yearsCommented out the
console.log()
it is more cleaner than the others perhaps.:) -
GottZ over 11 yearsi like how you copyed the last part. /irony
-
epascarello over 11 years@Jan-StefanJanetzky I did not copy anything of yours. Flatter yourself thinking that I did.
-
Marvin over 5 years@Bob you don't need the ternary operation because
val.length > 0
by itself is a boolean.