Disable a button if empty input

Question

I would like the "Send" button to be disabled if the input is empty. I want to manage this in the JavaScript file. I know that it is possible in HTML to call a function on the input but I prefer to use an event in the js file.

https://codepen.io/leakcim-web/pen/gOYPpqo

//javascript
let inputElt = document.getElementById('input');
let btn = document.getElementById('button');

if (inputElt.value !== '') {
  btn.disabled = false;
} else {
  btn.disabled = true;
}

<input placeholder="Enter some text" name="name" id='input' />
<button id='button'>Réserver</button>

use addEventListener in your js to your inputElt, and update the btn disabled from the listener... — user11855261
– user11855261, Commented Aug 13, 2019 at 12:17
I had a similar problem and this question / answer helped me a lot. Thank you. — Axle Max
– Axle Max, Commented Dec 30, 2020 at 4:05
I posted my probelm and solution here if it helps anyone stackoverflow.com/questions/65501771/… — Axle Max
– Axle Max, Commented Dec 30, 2020 at 4:05

Jamiec · Accepted Answer · 2019-08-13 12:30:10Z

7

You can use addEventListener to add an event to the textbox and enable/disable as appropriate

let inputElt = document.getElementById('input');
let btn = document.getElementById('button');

inputElt.addEventListener("input", function(){
  btn.disabled = (this.value === '');
})

<input placeholder="Enter some text" name="name" id='input'/>
<button id='button' disabled>Réserver</button>

edited Aug 13, 2019 at 12:30

answered Aug 13, 2019 at 12:21

Jamiec

136k15 gold badges143 silver badges202 bronze badges

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

6 Comments

Adrien Martinet Over a year ago

I would go with btn.disabled = !this.value; and by default set disabled property on the DOM instead of setting it in JS otherwise 👍

Jamiec Over a year ago

@AdrienMartinet I agree on setting disabled in the DOM. Updated. The logical check I chose to keep close to the OP, but your way would also work just fine.

David Thomas Over a year ago

It's worth including a call to String.prototype.trim(), otherwise a string of white-space can be submitted (I realise that this isn't a stated requirement though).

Leakcim Over a year ago

Thank you for your help. @Jamiec I do not understand this part: btn.disabled = (this.value === ''); Disabled is not boolean? I do not understand why it is assigned the value this.value === ''

Adrien Martinet Over a year ago

Yes Disable is a boolean attribute w3schools.com/tags/att_disabled.asp :)

|

jcubic · Accepted Answer · 2019-08-13 12:50:04Z

2

Just as amusement, you can do this in just CSS and html, reference Matching an empty input box using CSS

#input:invalid + button {
    opacity: 0.5;
    pointer-events: none;
}

<input placeholder="Enter some text" name="name" id='input' required="required"/>
<button id='button'>Réserver</button>

And if you have something in between the button and input you can use #input ~ #button. also you don't need the id attributes you can use type="submit" on button then use input ~ [type="submit"] then it will work with any input at the same nesting.

edited Aug 13, 2019 at 12:50

answered Aug 13, 2019 at 12:44

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

1 Comment

Leakcim Over a year ago

Interesting alternative :) Thank you

Collectives™ on Stack Overflow

Disable a button if empty input

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related