How to disable an input field using Javascript?

Question

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.

You have forgot to tell us where your problem is. What is aour question? — feeela, Oct 15 '12 at 13:33
Someone has a spelling problem document.getElementById("valorFinal").lenght <-- length — epascarello, Oct 15 '12 at 13:33
you should hook onkeyup instead of onkeydown. besides you should enable the second input again when the first reaches a length of 0 again. just look at my answer for an example. — GottZ, Oct 15 '12 at 13:48

score 30 · Accepted Answer · answered Oct 15 '12 at 13:38

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;
}

@Jan-StefanJanetzky I did not copy anything of yours. Flatter yourself thinking that I did. — epascarello, Oct 16 '12 at 13:02

score 2 · Answer 2 · edited Oct 01 '18 at 10:45

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.

Fiddle

<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  );
}

edited Oct 01 '18 at 10:45

Community

1
1

answered Oct 15 '12 at 13:48

Bob

1,489
1
16
28

console.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. – GottZ Oct 15 '12 at 13:52
Commented out the `console.log()` it is more cleaner than the others perhaps.:) – Bob Oct 16 '12 at 07:01
@Bob you don't need the ternary operation because `val.length > 0` by itself is a boolean. – Marvin Sep 29 '18 at 19:41

score 0 · Answer 3 · answered Oct 15 '12 at 13:43

0

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/

answered Oct 15 '12 at 13:43

GottZ

4,824
1
36
46

Thanks, the onkeyup thing solved the problem I had with field not enabling until pressing Del key again (when it was empty). – JorgeeFG Oct 15 '12 at 13:49
no problem. onblur could also be of interest for you in case someone clicks somewhere while holding a key down (before onkeyup got fired) – GottZ Oct 15 '12 at 13:50

How to disable an input field using Javascript?

3 Answers3

Linked