CODEWITHSUNDEEP
javascriptjqueryhtml
user3809938
user3809938

Reputation: 1304

jquery enable submit button when all fields are complete including date field

I have the following html:

<form >

    <input type="text" name="username" id="username" value="" placeholder="User name" />

    <input type="password" name="password" id="password" value="" placeholder="Password" />

    <input type="password" name="password" id="confirm_password" value="" placeholder="Confirm Password" />

    <input type="email" name="email" id="email" value="" placeholder="Email" />

    <input type="text" name="firstname" id="firstname" value="" placeholder="First name" />

    <input type="text" name="lastname" id="lastname" value="" placeholder="Last name" />

   <input type="date" name="date" id="date"  placeholder="date" />

     <ul class="actions align-center">
   <li><input type="submit" value="Register" id="register" disabled="disabled"/></li>
    </ul>

</form>

Also the following javascript:

(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');
    }
});
})()

I can get button to be disabled then enabled without date input, but as soon as i put in the date input, the button does not become enabled. Why is this?

Edit: it works but user has to type in date, but how can i enable it when user just selects date by clicking?

jsfiddle link

Upvotes: 0

Views: 1099

Answers (1)

Jordan Soltman
Jordan Soltman

Reputation: 3873

It's because you are using the keyup event but when you click a date, that's not a key up event. This can be solved by changing keyup to change.

$('form input').change(function() {

https://jsfiddle.net/hn6tf36L/1/

Upvotes: 2

Related Questions