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.

Someone has a spelling problem document.getElementById("valorFinal").lenght <-- length — epascarello
– epascarello, Commented Oct 15, 2012 at 13:33
You have forgot to tell us where your problem is. What is aour question? — feeela
– feeela, Commented Oct 15, 2012 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
– GottZ, Commented Oct 15, 2012 at 13:48

epascarello · Accepted Answer · 2012-10-15 13:38:06Z

31

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

answered Oct 15, 2012 at 13:38

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GottZ Over a year ago

i like how you copyed the last part. /irony

epascarello Over a year ago

@Jan-StefanJanetzky I did not copy anything of yours. Flatter yourself thinking that I did.

Community · Accepted Answer · 2018-10-01 10:45:09Z

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 1, 2018 at 10:45

CommunityBot

11 silver badge

answered Oct 15, 2012 at 13:48

Bob

1,4871 gold badge16 silver badges28 bronze badges

3 Comments

GottZ Over a year ago

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.

Bob Over a year ago

Commented out the console.log() it is more cleaner than the others perhaps.:)

Marvin Over a year ago

@Bob you don't need the ternary operation because val.length > 0 by itself is a boolean.

GottZ · Accepted Answer · 2012-10-15 13:43:19Z

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, 2012 at 13:43

GottZ

4,9771 gold badge39 silver badges48 bronze badges

2 Comments

JorgeeFG Over a year ago

Thanks, the onkeyup thing solved the problem I had with field not enabling until pressing Del key again (when it was empty).

GottZ Over a year ago

no problem. onblur could also be of interest for you in case someone clicks somewhere while holding a key down (before onkeyup got fired)

Collectives™ on Stack Overflow

How to disable an input field using Javascript?

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related