How to show a hidden div using jQuery if 3 input text fields in another div are not empty?

Question

I have a div that is hidden when the DOM is loaded, using hide().

    <div class="disappear">
    Some text appears here
    </div>

How do I make the above div (.disappear) show when the input fields with class .master (one to three) are not empty. (Ideally, trigger it on .blur in each of the input fields.)

    <div id="form">
    <form>
    <input type="text" name="one" class="master">
    <input type="text" name="two" class="master">
    <input type="text" name="three" class="master">
    <input type="text" name="four" class="slave">
    <input type="text" name="five" class="slave">
    </form>
    </div>

Thanks in advance!

lonesomeday · Accepted Answer · 2011-05-23 10:41:47Z

3

Something like this, I think:

$('.master').change(function() {
    if ($('.master').filter(function() {
        return !this.value;
    }).length) {
        // some are empty
        $('.disappear').hide();
    } else {
        // none are empty
        $('.disappear').show();
    }
});

jsFiddle. Note that I've used change rather than blur, because it's semantically what you mean and it's going to be faster.

answered May 23, 2011 at 10:41

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

2 Comments

lonesomeday Over a year ago

@Stroller Glad to help. If an answer has resolved your question, you can mark it as accepted.

Stroller Over a year ago

There seems to be a 5-minute gap before I can mark it as accepted. Will do as soon as it expires.

kheya · Accepted Answer · 2011-05-23 10:47:04Z

1

You would be doing it inside some event handler.

function YourEventHandler()
{
  var v1=$.trim($("#one").val());
  var v2=$.trim($("#two").val());
  var v3=$.trim($("#three").val());
  if(v1 !== '' && v1 !== undefined && v2 !== '' && v2 !== undefined v3 !== '' && v3 !== undefined)
  $(".disappear").show();
  else $(".disappear").hide();
}

I haven't used the .master as you might have that class in other elements. If not you can use that too. Give it a try & let me know.

answered May 23, 2011 at 10:47

kheya

7,62920 gold badges80 silver badges116 bronze badges

Comments

xkeshav · Accepted Answer · 2011-05-23 11:00:48Z

1

try this ( this will also check for emptyness )

$('input.master').live('blur change', function () {
    var trimVal = $.trim($(this).val());
    if(!trimVal.length)
    {
        $('.disappear').show();
    }
    else {
         $('.disappear').hide();
    }   
});

working DEMO

answered May 23, 2011 at 11:00

xkeshav

54.2k47 gold badges183 silver badges256 bronze badges

Comments

Matt · Accepted Answer · 2011-05-23 10:46:48Z

0

This jsfiddle should do the job http://jsfiddle.net/dxpbT/

$(".master").blur(function() {
    if ($(this).val().length > 0) {
        var $all = $('.master');
        var $empty = $all.filter('[value=""]');

        if ($empty.length == 0) {
            $(".disappear").show();
        }    
    }

});

answered May 23, 2011 at 10:46

Matt

1,0387 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to show a hidden div using jQuery if 3 input text fields in another div are not empty?

4 Answers 4

2 Comments

Comments

working DEMO

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related