jquery - Disable Submit button until Input fields filled in

Question

Was wondering if anyone could point me in the right direction with the following piece of jquery. I want to disable the submit button until my input fields have been filled in.

I have come up with this

$(document).ready(function (){
 if ($('#inputName, #inputEmail, #inputTel').val().length > 0) {
  $("input[type=submit]").attr("disabled", "false");
 }
 else {
  $("input[type=submit]").attr("disabled", "true");
 }
});

but the button is permanently disabled, Even after filling in all the text input fields

Still learning Jquery and haven't used it for a while.. So any pointers appreciated

Thanks

Answer 1

Your event binding is only on document ready.

So there is no listener when you change something.

Do this instead :

$(document).ready(function (){
    validate();
    $('#inputName, #inputEmail, #inputTel').change(validate);
});

function validate(){
    if ($('#inputName').val().length   >   0   &&
        $('#inputEmail').val().length  >   0   &&
        $('#inputTel').val().length    >   0) {
        $("input[type=submit]").prop("disabled", false);
    }
    else {
        $("input[type=submit]").prop("disabled", true);
    }
}