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?

isn't it $('#register').attr('disabled',true);?

Rob Erskine
– Rob Erskine

2015-12-15 14:54:42 +00:00
Commented Dec 15, 2015 at 14:54 — Rob Erskine
– Rob Erskine, Commented Dec 15, 2015 at 14:54

jolmos · Accepted Answer · 2015-12-15 14:43:41Z

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

This works, as it should, however I should have described me requirement slightly better. On my form I have a group of checkboxes/radio buttons that are allowed to be left blank and then I have the form with input text boxes which have to be filled in. when I use this answer on mine it does not un disable still - i believe because of the checkboxes

Collectives™ on Stack Overflow

Disabled submit button not enabling with JQuery

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related