Question

The script below is used to hide a paragraph until all text fields inside div.form have been filled out.

As it is now, in order to reveal the paragraphs I would have to fill out BOTH forms. What I want is for each form to act independently. In other words, if you filled out the three inputs in the first form, the paragraph in that first DIV would be revealed.

I can accomplish this by duplicating the code and adding more classes, but that is obviously less than ideal.

HTML

<div class="form one">  
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <p style="display:none">All inputs in this DIV contain text</p> 
</div>

<div class="form two">  
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <p style="display:none">All inputs in this DIV contain text</p> 
</div>

jQuery

$('.form input').keyup(function() {

    var empty = false;
    $('.form input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('.form p').css('display', 'none');
    } else {
        $('.form p').css('display', 'block');
    }
});

Answer 1

You should simply select the inputs and the p from that .form:

$('.form input').keyup(function() {

    var empty = false,
        $form = $(this).parent();

    $form.find('input').each(function() {
        if ($(this).val() == '') {
            empty = true;
            return false; // stops the loop
        }
    });

    if (empty) {
        $form.find('p').css('display', 'none');
    } else {
        $form.find('p').css('display', 'block');
    }
});

And here’s the fiddle: http://jsfiddle.net/tGBGK/

P.S. You could further optimize this by caching the selectors.

---

Alternatively, you could forego the loop, and just use an attribute selector:

$('.form input').keyup(function() {

    var $form = $(this).parent(),
        empty = $form.find('input[value=]').length;

    if (empty) {
        $form.find('p').css('display', 'none');
    } else {
        $form.find('p').css('display', 'block');
    }
});

…and here’s the fiddle: http://jsfiddle.net/tGBGK/1/

---

You can further shorten this, by using a ternary operator:

$('.form input').keyup(function() {

    var $form = $(this).parent(),
        empty = $form.find('input[value=]').length;

    $form.find('p').css('display', empty ? 'none' : 'block');
});

…and finally, here’s the fiddle: http://jsfiddle.net/tGBGK/2/

Thanks @JesseB.