Enable button when text entered in dynamically added textboxes

Question

I have a form which takes input in textboxes. First I display 1 textbox, then by clicking on a button (add), another text box shows up. I want the add button to be disabled if any of the textboxes are empty. My code is as follows:

<script>
        function doCheck(){
            var allFilled = true;
            var inputs = document.getElementsByName("a[]");
            for(var i=0; i<inputs.length; i++){
                if(inputs[i].type == "text" && inputs[i].value == ''){
                    allFilled = false;
                    break;
                }
            }
            document.getElementById("add_a").disabled = !allFilled;
        }

        window.onload = function(){
            var inputs = document.getElementsByName("a[]");
            for(var i=0; i<inputs.length; i++){
                if(inputs[i].type == "text"){
                    inputs[i].onkeyup = doCheck;
                    inputs[i].onblur = doCheck;
                }
            }
        };
        $(document).ready(function(){
            $("#add_a").click(function(){
                $("#a").append("<li><input class='textbox' name='a[]' type='text' size='120'></li>");
            });
       });
    </script>

The html part:

 <ol id="a">
        <li><input class="textbox" type="text" name="a[]" size="120" /></li>
</ol>
<input class="btn" type="button" id="add_a" value="ADD" disabled="true">

This works for the first textbox but not the ones that dynamically appear after clicking the add button. Please tell me how I can apply it to all of them

Answer 1

Note: Don't mix jQuery and javascript in your code.

2 things you'll need to do to make this work.

First,

$("#add_a").click(function () {
    $("#a").append("<li><input class='textbox' name='a[]' type='text' size='120'></li>");
    $("#add_a").prop('disabled', true); //disable immediately after adding
});

Second,

Since you're adding the text boxes dynamically you'll need to use event delegation.

$(document).on('keyup', '.textbox', function(){
     // Check all textboxes' text length and disable btn functionality here
});

Answer 2

Use Event Delegation to bind your function to an element that exists on page load (like document or better yet an containing div closer to the element):

$(document).on('keyup', '.textbox', function(){
     // do stuff
});

Answer 3

Here is a dirty version for you to try. I would come back and nudge it if that worked for you. As others said, make full use of jQuery when you're anyway using it.

$("#add_a").click(function(){
    $("#a").append("<li><input class='textbox' name='a[]' type='text' size='40'></li>");
    $(this).prop("disabled", true);
});

$(document).on("keyup", "#a input", function() {
    var emptyInputs = $("#a").find("input").filter(function() {
        return $.trim( $(this).val() ) == ""
    }).length;
    $("#add_a").prop("disabled", emptyInputs);
});

Demo@ fiddle