show div when all input fields have content

Question

I have a form with a few input fields, I only want to show a div when all the input fields got content, when one of the input fields has no content the div should disappear again.

I made it work with one input field, but how do I get it to work when all the input fields are filled in (don't know if its a good clean way?):

$(function () {    
$('input').change(function() {
$('.next').toggle($(this).val().length !== 0);
}); });

Fiddle:
http://jsfiddle.net/uQyH9/19/

Royi Namir · Accepted Answer · 2014-05-07 15:28:39Z

2

Try this : http://jsfiddle.net/uQyH9/21/

$(function () {   
    var _cached=$('input');

    _cached.change(function() {
        if (_cached.filter(function (){return $(this).val().length }).length==_cached.length)
        $('.next').show();
         else
        $('.next').hide();

    });
});

answered May 7, 2014 at 15:28

Royi Namir

149k145 gold badges504 silver badges833 bronze badges

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

5 Comments

Brian Coolidge Over a year ago

Ummm.. I'm sorry but I'm kind of curious, what's the _ stands for, is it just like a variable name?

Royi Namir Over a year ago

@WesleyLachenal caching the variable instead of re-calc each time

j08691 Over a year ago

Yeah I'd never name a variable _. Completely non-intuitive.

Royi Namir Over a year ago

@AndersG no . the var is on it's own scope.

agrm Over a year ago

No critique intended, just a simple question :-)

Irvin Dominin · Accepted Answer · 2014-05-12 13:25:07Z

1

You can use a filter function to check that all the input are filled.

Code:

    $(function () {
        $('input').change(function () {
            $('.next').toggle($("input").filter(function () {
                return this.value === "";
            }).length === 0)
        });
    });

Demo: http://jsfiddle.net/IrvinDominin/DwF2P/

UPDATE

You can check the value of the elements by type by cheking type attribute.

Code:

$(function () {
    $('input').change(function () {
        $('.next').toggle($("input").filter(function () {
            var myType=$(this).attr("type");
            if (myType === "checkbox") return !$(this).is(":checked");
            if (myType==="radio"){
                var myName = $(this).attr("name");
                if (myName==="") return !$(this).is(":checked");
                return $('input[name='+ myName +']:checked').length===0
            }
            return this.value === "";
        }).length === 0)
    });
});

Demo: http://jsfiddle.net/IrvinDominin/pqJhg/

edited May 12, 2014 at 13:25

answered May 7, 2014 at 15:31

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

2 Comments

Erwin van Ekeren Over a year ago

This one works best! But I have one thing to add that I did forgot to mention; is it also possible when one of the input fields is a radio button? See: jsfiddle.net/DwF2P/1

Irvin Dominin Over a year ago

@ErwinvanEkeren you are welcome; for different types check the edit

Barmar · Accepted Answer · 2014-05-07 15:28:57Z

0

Loop over the inputs. If you find one that isn't filled in, then hide the DIV. If you don't, show the DIV.

$('input').change(function() {
    var allFilled = true;
    $('input').each(function() {
        if (this.value === '') {
            allFilled = false;
            return false; // Terminate the loop
        }
    }
    $('.next').toggle(allFilled);
});

answered May 7, 2014 at 15:28

Barmar

789k57 gold badges555 silver badges669 bronze badges

Collectives™ on Stack Overflow

show div when all input fields have content

3 Answers 3

5 Comments

UPDATE

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

UPDATE

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related