How to disable or enable html component through JS?

Question

<form>
    <input type="text" id="name" onkeydown="myHandler()"/>
    <select id="select">
        <option value = "a">a</option>
        <option value = "b">b</option>
    </select>
</form>

<script>
    function myHandler() {
        if(document.getElementById("name")){
            document.getElementById("select").disabled = true;
            return;
        }
        document.getElementById("select").disabled = false;
    }
</script>

Well, this is all I have done. This disables the select whenever I input something in input but the select will stay disabled even if erase all the inputs in the input box. What can I do to make the select selectable if the input field is empty?

what will be the initial state of select

brk
– brk

2018-09-23 11:54:12 +00:00
Commented Sep 23, 2018 at 11:54 — brk
– brk, Commented Sep 23, 2018 at 11:54

Prashant Pimpale · Accepted Answer · 2018-09-23 12:26:47Z

1

I would use onkeyup event to check the input value of the text box because the onkeydown event fire up after key down so while there is a single character in the text box it needs to clear one more time to check for the empty value condition.

The demo with your code is:

function myHandler() {
 console.log(document.getElementById("name").value.trim());
 if (document.getElementById("name").value.length == 0) {
  document.getElementById("select").disabled = false;
  return;
 } else {
  document.getElementById("select").disabled = true;
 }
}

<form>
    <input type="text" id="name" onkeyup="myHandler()"/>
    <select id="select">
        <option value = "a">a</option>
        <option value = "b">b</option>
    </select>
</form>

edited Sep 23, 2018 at 12:26

answered Sep 23, 2018 at 12:21

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

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

Comments

Rodrigo Brito · Accepted Answer · 2018-09-23 12:03:09Z

0

You can check the content to disabled it:

  function myHandler() {
    var input = document.getElementById("name");
    var select = document.getElementById("select");
    if(input && input.value){
      select.disabled = true;
    } else {
      select.disabled = false;
    }
  }

See that code in Codepen: https://codepen.io/rodrigo73/pen/PdgewR?editors=1000

answered Sep 23, 2018 at 12:03

Rodrigo Brito

4085 silver badges10 bronze badges

2 Comments

enxaneta Over a year ago

please use onchange="myHandler()". onkeydown there isn't yet any input.value and won't disable the select.

Rodrigo Brito Over a year ago

onchange is triggered only on focus lost. Maybe the oninput event can improve this.

Tarabass · Accepted Answer · 2018-09-23 12:11:20Z

0

There is no reason document.getElementById("name") will be null when you empty the input. You have to check the value of the input as well.

if(document.getElementById("name") && document.getElementById("name").value){
    document.getElementById("select").disabled = true;
    return;
}

document.getElementById("select").disabled = false;

answered Sep 23, 2018 at 12:11

Tarabass

3,1462 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to disable or enable html component through JS?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related