Enable submit button after all fields are filled

Question

I have a jquery toggling menu with password fields. By default, the submit button is disabled, and enabled on keyup events.

$(function(){
  $("#submitProfile").attr("disabled","true");
  $("#password_confirmation, #password, #current_password").keyup(function(){
    $("#submitProfile").removeAttr("disabled");
  });
});

But how can I keep the button disabled until all the fields are filled?

Answer 1

You can add a condition.

$(function(){
  $("#submitProfile").attr("disabled","true");
  $("#password_confirmation, #password, #current_password").keyup(function(){
      if($("#password_confirmation").val() && $("#password").val() && $("#current_password").val())
          $("#submitProfile").removeAttr("disabled");
  });
});

Live demo

Answer 2

You can try something like this:-

if($('#password_confirmation, #password, #current_password').val().length>0){
 $("#submitProfile").removeAttr("disabled");
}