CODEWITHSUNDEEP
javascriptjquery
drew
drew

Reputation: 781

Disabled submit button not enabling with JQuery

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?

Upvotes: 0

Views: 55

Answers (1)

jolmos
jolmos

Reputation: 1575

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">

Upvotes: 2

Related Questions