Question

I need some help with something… say I have the following form…

<form name="" id="" method="" action="">

    <input type="text" id="text1" name="text1" />
    <br />
    <br />

    <input type="text" id="text2" name="text2" />
    <br />
    <br />

    <input type="text" id="text3" name="text3" />
    <br />
    <br />

    <input type="text" id="text4" name="text4" />
    <br />
    <br />
    <input type="submit" value="let's go" disabled="disabled" />

</form>

Now I want to have a simple script to enable the submit when the values of the text boxes are not an empty string or null…

So I have something like this.. which I will bind to the window.onload

 function enableButton(){

    var formitemsArray = ['text1','text2','text3','text4'],
       i;

        // Loop through all items
        for(i=0;i<formitemsArray.length;i++){

            // validate the length on the keypress...
            formitemsArray.onkeypress = function(){

                // loop through all the items again
                for(j=0;j<formitemsArray.length;j++){

                    if(formitemsArray[j] == "" || formitemsArray[j] == null ){
                        // return false or something???
                    }else{
                        document.getElementById("submitButton").disabled = false;
                    }

                }
            }

        }

}

Now I think I’m on the right lines to a solution but I’m getting lost when trying to make sure that all the items are greater than a zero length string as I’m returning false too soon. Can someone set me straight please?

Answer 1

Welcome to event bubbling!

This does the following: listen to an event (onkeypress) on the whole element and all its children! Which means you can do the following:

document.getElementById('form-id').onkeypress = function(e) {
    var text1 = document.getElementById('text1'),
        text2 = document.getElementById('text2'),
        text3 = document.getElementById('text3'),
        text4 = document.getElementById('text4')

    if (text1.value.length > 0 &&
        text2.value.length > 0 &&
        text3.value.length > 0 &&
        text4.value.length > 0) {
        document.getElementById('submit-button').disabled = false
    }

    // As an aside, for later: if you want to get the element
    // that triggered the event, you have to do the following
    // to be cross-browser:
    var evt = e || window.event, // IE doesn't get the event passed by argument
        target = e.target || e.srcElement // 'target' is official, old versions of FF used 'srcElement'

    // With the 'target' variable, you can now play.
}

There is another more generic solution, but it might not fit your needs (note that it requires a forEach shim:

// Declare a counter variable
var count = 0
document.getElementById('form-id').onkeypress = function(e) {
    // Get all the inputs!
    var inputs = this.getElementsByTagName('input')

    // Now loop through all those inputs
    // Since a NodeList doesn't have the forEach method, let's borrow it from an array!
    [].forEach.call(inputs, loopThroughInputs)
}
function loopThroughInputs(input) {
    // First check the type of the input
    if (input.type === 'text') {
        // If the value is correct, increase the counter
        if (input.value.length > 0) {
            count++
        }
        // If the 4 inputs have increased the counter, it's alright!
        if (count === 4) {
            document.getElementById('submit-button').disabled = false
        }
    }
}

And now this code was proposed by @Esailija, and it is way better and cleaner. However, it also requires ES5-Shim (for the every method):

document.getElementById('form-id').onkeypress = function(e) {
    var inputs = [].slice.call( this.querySelectorAll( '[type=text]') );
    document.getElementById('submit-button').disabled = !inputs.every(function(input){
        return !!input.value;
    });
}

(This guy is brillant, just don’t tell him)