I have multiple inputs on my page, when any them are filled, an "info div" appears on the side; Now if all the inputs are manually cleared (on keyup), I need to hide that "info div".

How can I check (on keyup) that all of the inputs are empty at the same time?

Cheers

I have multiple inputs on my page, when any them are filled, an "info div" appears on the side; Now if all the inputs are manually cleared (on keyup), I need to hide that "info div".

How can I check (on keyup) that all of the inputs are empty at the same time?

Cheers

• javascript
• jquery
• forms
• input
• onkeyup

• show us how you've made the info div appear – DannyTheDev Commented Nov 14, 2014 at 14:06

2 Answers 2

Loop through all the inputs, and if you get to a non-empty one you know they're not all empty. If you plete your loop without finding one, then they are all empty.

function isEveryInputEmpty() {
    var allEmpty = true;

    $(':input').each(function() {
        if ($(this).val() !== '') {
            allEmpty = false;
            return false; // we've found a non-empty one, so stop iterating
        }
    });

    return allEmpty;
}

You might want to 'trim' the input value before paring (if you want to treat an input with just whitespace in it as empty). You also might want to be more specific about which inputs you're checking.

Simple solution (ES6) Without jQuery

html

<div class="container">
  <input id="input1" />
  <input id="input2" />
  <input id="input3" />
</div>

JS

document.getElementById('btnCheckEmpty').addEventListener('click', () => {
        if (isEveryInputEmpty())
            alert('empty');
        else
            alert('not empty');
});


const isEveryInputEmpty = () => {
    var inputs = document.querySelectorAll('.container input');
    
    for (const input of inputs)
        if (input.value !== '') return false;
    
    return true;
}

Online Demo