Disable input button when field.value is empty

Question

I've seen this answered in jquery, but I'd like to know how I can do it in javascript. So far I came up with the following, but I understand it is not capturing the nameF.value properly.

var nameF = document.getElementById("name-field");

var formButton = document.getElementById("form-button");

function go() {
  if (nameF.value == "") {
    formButton.classList.add("notclickable");
  }
}

go();

#form-button {
  cursor: pointer;
  outline: none;
  border: none;
  font-family: $body-font;
  font-size: 14px;
  padding: 16px;
  color: #fff;
  font-weight: 800;
  background-color: #000;
  position: relative;
  border-radius: 2px;
  opacity: 1;
}

#form-button.notclickable {
  opacity: .1;
  pointer-events: none;
}

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name">
<input type="submit" value="Send" id="form-button">
https://stackoverflow.com/questions/ask#

How can I do it without jQuery, just using vanilla?

Thank you!

Depends on behavior you are looking for. You only call go() once when page loads and before user does any input — charlietfl
– charlietfl, Commented Nov 18, 2017 at 15:18
.keyup event toggle the disabled attribute on the button element. — Ronnie Smith
– Ronnie Smith, Commented Nov 18, 2017 at 15:18

score 3 · Accepted Answer · 2017-11-18 15:30:51Z

3

All you need is an event handler assigned to nameF, and to .toggle() the class instead of add().

The .toggle() receives an optional second argument where you tell it if it should add or remove the class, so you'll pass the string comparison there.

var nameF = document.getElementById("name-field");

var formButton = document.getElementById("form-button");

function go() {
  formButton.classList.toggle("notclickable", nameF.value == "");
}

go();

nameF.addEventListener("input", go);

#form-button {
  cursor: pointer;
  outline: none;
  border: none;
  font-family: $body-font;
  font-size: 14px;
  padding: 16px;
  color: #fff;
  font-weight: 800;
  background-color: #000;
  position: relative;
  border-radius: 2px;
  opacity: 1;
}

#form-button.notclickable {
  opacity: .1;
  pointer-events: none;
}

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name">
<input type="submit" value="Send" id="form-button"> https://stackoverflow.com/questions/ask#

Also, be aware that you don't need a class to disable the button. You can use the disabled property with the :disabled selector. This disables its functionality too instead of just fading it.

var nameF = document.getElementById("name-field");

var formButton = document.getElementById("form-button");

function go() {
  formButton.disabled = nameF.value == "";
}

go();

nameF.addEventListener("input", go);

#form-button {
  cursor: pointer;
  outline: none;
  border: none;
  font-family: $body-font;
  font-size: 14px;
  padding: 16px;
  color: #fff;
  font-weight: 800;
  background-color: #000;
  position: relative;
  border-radius: 2px;
}

#form-button:disabled {
  opacity: .1;
  pointer-events: none;
}

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name">
<input type="submit" value="Send" id="form-button"> https://stackoverflow.com/questions/ask#

edited Nov 18, 2017 at 15:30

answered Nov 18, 2017 at 15:18

user8897421

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

7 Comments

João Araújo Over a year ago

Thank you rock star! I was unaware of the "input" event. Worked perfectly. :)

user8897421 Over a year ago

You're welcome. Just be aware that it is somewhat newer compared to events like keypress. Still, all modern browsers do support it.

João Araújo Over a year ago

By the way, I cannot seem to understand what the = means in formButton.disabled = nameF.value == ""; How does it work? Could you translate to current language what this is saying?

user8897421 Over a year ago

The = is simply the assignment operator. So the nameF.value == "" produces either true or false, and that value gets assigned to the .disabled property.

João Araújo Over a year ago

oh I see! but wouldn't it also work if I used a if (nameF.value == "") {formButton.disabled} ? I tried the if case, and it did not work.

|

Pablo Darde · Accepted Answer · 2017-11-18 15:31:00Z

1

Try something like that!

var nameF = document.getElementById("name-field");

var formButton = document.getElementById("form-button");

function onChangeContent(e) {
  formButton.disabled = e.target.value !== '' ? false : true;
}

nameF.addEventListener('keyup', onChangeContent);

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name">
<input type="submit" value="Send" id="form-button" disabled>

answered Nov 18, 2017 at 15:31

Pablo Darde

6,52211 gold badges44 silver badges61 bronze badges

Collectives™ on Stack Overflow

Disable input button when field.value is empty

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related