Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Password Confirmation Form Perfect

Qasim Hafeez
Qasim Hafeez
12,731 Points
Posted by Qasim Hafeez
Qasim Hafeez
12,731 Points

[SOLVED] $(“#submit”) returns “disabled”

When Andrew types in $(“#submit”) into the console, it does not return disabled. My code returns disabled when I type in $(“#submit”). My code will not work, the button remains disabled.

One thing I did notice: the code runs if I call enableSubmitEvent() in the console and THEN submit the form. That’s the only way I got it to work.

//Problem: Hints are shown even when form is valid
//Solution: Hide and show them at appropriate times
var $password = $("#password");
var $confirmPassword = $("#confirm_password");


//Hide hints
$("form span").hide();

function isPasswordValid(){
  return $password.val().length > 8;
}

function arePasswordsMatching(){
  return $confirmPassword.val() === $password.val();
}

function canSubmit() {
  return isPasswordValid() && arePasswordsMatching();
}

function passwordEvent(){

  //Find out if password is valid
  if(isPasswordValid()) {
    //Hide hint if valid
    $password.next().hide();
  } else{
      $password.next().show();
    //else show hint
  }
}

function confirmPasswordEvent(){
  //Find out if password and confirmation match
  if(arePasswordsMatching()){
    //Hide hint if matched
    $confirmPassword.next().hide();
  } else {
    //else show hint
    $confirmPassword.next().show();

  }

}

function enableSubmitEvent(){
  $("#submit").prop("disabled", !canSubmit());
}


//When even happens on password input
$password.focus(passwordEvent).keyup(passwordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent());


//When event happens on confirmation input
$confirmPassword.focus(confirmPasswordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent());

enableSubmitEvent();
Qasim Hafeez
Qasim Hafeez
12,731 Points
Qasim Hafeez
Qasim Hafeez
12,731 Points

I got it. I was calling the enableSubmitEvent function inside the "keyup". Got rid of the parentheses and the code worked.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Qasim Hafeez, glad you figured it out. I've marked your question as solved.