How to query multiple conditions or results of anonymous functions in jQuery

Question

First of all, I have a form with several input fields and some Bootstrap-Buttons. Now, what I want to do is to check, if two conditions ("Are all input fields filled?" ; "Is at least one Button pushed down?") are fullfilled to enable the user to click the submit button.

This is my code:

function checkInput() {
    var inputFields = $("input[name=inp1],[name=inp2],[name=inp3]");
    var buttons = $("button[name=btn1],[name=btn2],[name=btn3]");
    var empty1;
    var empty2;

    buttons.click(function() {
        if(!$(this).hasClass('active')) {
            empty1 = false;
        } else {
            empty1 = true;
        }
    });

    inputFields.keyup(function() {
        inputFields.each(function() {
        if($(this).val().length == 0) {
                empty2 = true;
            } else {
                empty2 = false;
            }
        });
    });

    alert(empty1);
    alert(empty2);

    if(empty1 == true && empty2 == true) {
        $('button[name=submitBtn]').prop('disabled', false);
    } else {
        $('button[name=submitBtn]').prop('disabled', true);
    }
}

The alert(...) functions say, that empty1 and empty2 are "undifined", which i can understand. But my question is, how can I retrieve the true or false values from buttons.click() and inputFields.keyup() to query them afterwards?

Answer 1

The problem is the scope of the variables, those vars need to be global:

var empty1;
var empty2;

function checkInput() {
    var inputFields = $("input[name=inp1],[name=inp2],[name=inp3]");
    var buttons = $("button[name=btn1],[name=btn2],[name=btn3]");


    buttons.click(function () {
        if (!$(this).hasClass('active')) {
            empty1 = false;
        } else {
            empty1 = true;
        }
    });

    inputFields.keyup(function () {
        inputFields.each(function () {
            if ($(this).val().length == 0) {
                empty2 = true;
            } else {
                empty2 = false;
            }
        });
    });

    alert(empty1);
    alert(empty2);

    if (empty1 == true && empty2 == true) {
        $('button[name=submitBtn]').prop('disabled', false);
    } else {
        $('button[name=submitBtn]').prop('disabled', true);
    }
}

Move it outside of the function an it will works: see it in jsFiddle working example