Question

118

How to disable an input field using Javascript?

rated 0 times [ 121] [ 3] / answers: 1 / hits: 110704 / 12 Years ago, mon, october 15, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kinsley

Add To Favorites

Follow

Total Points: 352

Total Questions: 84

Total Answers: 94

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

kinsley questions

1 Module not found: Can't resolve '@material-ui/lab/TabContext' in '/home/sanika/Desktop/Coding/React/my-forms/src/Components'

Sat, Aug 21, 21, 00:00, 3 Years ago

1 TypeError [ERR_HTTP_INVALID_HEADER_VALUE] for Algolia with Firebase

Mon, Jul 20, 20, 00:00, 4 Years ago

1 ReactJS: propTypes validation for array of objects

Mon, Nov 25, 19, 00:00, 5 Years ago

1 styled-components: extend styles and change element type

Sat, Apr 20, 19, 00:00, 5 Years ago

1 Changing the display of an element via Javascript?

Wed, Feb 20, 19, 00:00, 5 Years ago

View All

answered 12 Years ago micah · Accepted Answer

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;

}