JavaScript: Toggle button disable attribute

Question

I am trying to toggle button disable attribute using javascript. The button should be clickable only when username is more than 8 character and something should be typed in the password. But it's not working for some reason

let user = document.getElementById('p/u/e');
let pass = document.getElementById('password');
let submit = document.getElementById('submit');

if (user.value.length < 8 || pass.value.length == "")
{
    submit.disabled = true;
}
else
{
    submit.disabled = false;
}

input[type="text"], input[type="password"] {
    display: block;
    width: 250px;
    height: 35px;
    margin: 10px;
    border-radius: 3px;
    border: 1px solid rgb(219,219,219);
}

input[type="text"]::placeholder, input[type="password"]::placeholder {padding-left: 10px;}

button[type="submit"] {
    display: block;
    height: 30px;
    width: 250px;
    margin: 10px;
    margin-top: 0px;
    background-color: rgb(0,149,246);
    border-radius: 3px;
    border: none;
    color: rgb(255, 255, 255);
    font-weight: bold;
}

<input type="text" name="p/u/e" id="p/u/e" placeholder="Phone number, Username or Email">
<input type="password" name="password" id="password" placeholder="Password">
<button type="submit" id="submit">Log In</button>

Can you share what your HTML looks like? - In general, a minimal reproducible example is recommended to speed things up — blurfus
– blurfus, Commented Oct 17, 2020 at 19:01
@blurfus Not sure If I can add much but I've added the html and css too. It's a simple login page for practice — Noamaan Mulla
– Noamaan Mulla, Commented Oct 17, 2020 at 19:59

blurfus · Accepted Answer · 2020-10-17 21:42:56Z

You need to add listeners to the input fields to enable/disable the button when the values within the fields change.

See sample code below (sample code does not include actual submitting of the form)

let user = document.getElementById('p/u/e');
let pass = document.getElementById('password');
let submit = document.getElementById('submit');

// create a listener for both input fields(on change)
user.addEventListener('change', toggleDisable);
pass.addEventListener('change', toggleDisable);

// create a listener for the button (on click)
submit.addEventListener('click', function() {
  console.log(user.value);
  console.log(pass.value);
  console.log('submitting fields');

  // ... your code that submits the form

});

// evaluate input fields when either one changes (invoked by listeneres above)
function toggleDisable() {
  if (user.value.length < 8 || pass.value.length == "") {
    submit.disabled = true;
  } else {
    submit.disabled = false;
  }
}

input[type="text"],
input[type="password"] {
  display: block;
  width: 250px;
  height: 35px;
  margin: 10px;
  border-radius: 3px;
  border: 1px solid rgb(219, 219, 219);
}

input[type="text"]::placeholder,
input[type="password"]::placeholder {
  padding-left: 10px;
}

button[type="submit"] {
  display: block;
  height: 30px;
  width: 250px;
  margin: 10px;
  margin-top: 0px;
  background-color: rgb(0, 149, 246);
  border-radius: 3px;
  border: none;
  color: rgb(255, 255, 255);
  font-weight: bold;
}

<input type="text" name="p/u/e" id="p/u/e" placeholder="Phone number, Username or Email">
<input type="password" name="password" id="password" placeholder="Password">
<button type="submit" id="submit" disabled>Log In</button>

ayush gupta · Accepted Answer · 2020-10-17 17:11:08Z

1

<script>
    
    function toggleDisable(){
      let user = document.getElementById('p/u/e');
      let pass = document.getElementById('password');
      if (user.value.length < 8 || pass.value.length == "")
      {
         document.getElementById('submit').setAttribute("disabled", "true");
      }
      else
      {
         document.getElementById('submit').removeAttribute("disabled");
        document.getElementById('submit').focus();
      }
    }

  </script>

answered Oct 17, 2020 at 17:11

ayush gupta

132 bronze badges

2 Comments

blurfus Over a year ago

"Not working" is a poor description to help us solve the problem. Do you get any errors? If so, what do they say?

Noamaan Mulla Over a year ago

@blurfus I'm not getting any kind of errors. The problem is that the Log In button is stuck as disabled even if both the conditions are false

adyopo · Accepted Answer · 2020-10-18 10:07:36Z

1

So, basically you can use window.onload.

window.onload = function() {
      let user = document.getElementById('p/u/e');
      let pass = document.getElementById('password');
      if (user.value.length < 8 || pass.value.length == "")
      {
         document.getElementById('submit').setAttribute("disabled", "true");
      }
}
document.getElementById('p/u/e').onkeyup(function() {
    document.getElementById('submit').removeAttribute("disabled");
    document.getElementById('submit').focus();
}

edited Oct 18, 2020 at 10:07

answered Oct 17, 2020 at 20:09

adyopo

461 silver badge4 bronze badges

1 Comment

blurfus Over a year ago

How does this work when the inputs changes value (after typing in the user/pass)?

Collectives™ on Stack Overflow

JavaScript: Toggle button disable attribute

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related