Disabled submit button not enabling with JQuery

Question

I have added this JQuery - found on SO to validate my form so that fields must be filled before the submit button can be clicked, but the button never un-disables.

Form

<form action="homepage.php" method="POST" id="form">

<div class="medium-50 columns">
<label>Phone Number</label>
<input type="text" placeholder="Enter Your Phone Number" name="phone" />
</div>

<input type="submit" id="register" value="Submit" name="submit" disabled="disabled">

</form>

JQuery

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

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

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()

What is wrong?

Answer 1

It doesn't work because 'input' isn't a child of 'form'.

Take a look here and here .

Try this:

 (function() { $('form input').keyup(function() { var empty = false; $('form input').each(function() { if ($(this).val() == '') { empty = true; } }); console.log(empty); if (empty) { $('#register').attr('disabled', 'disabled'); } else { $('#register').removeAttr('disabled'); } }); })() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="homepage.php" method="POST" id="form"> <div class="medium-50 columns"> <label>Phone Number</label> <input type="text" placeholder="Enter Your Phone Number" name="phone" /> </div> <input type="submit" id="register" value="Submit" name="submit" disabled="disabled">