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

Posted by a k
a k
2,880 Points

"SUBMIT" button doesn't work. jQuery basics:Creating a password conf. form lesson: Perfect

Hello, When I click on "Submit" button after entering 9 digit password and confirming it, it doesn't display the webpage as it does in the lesson video. It stays on the same input screen. Other features work but not the "Submit". Thank you.

//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 $password.val() === $confirmPassword.val(); 
}

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

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

function confirmPasswordEvent() {

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

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

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

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

enableSubmitEvent(); 

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up Form</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>

    <form action="#" method="post">
        <p>
            <label for="username">Username</label>
            <input id="username" name="username" type="text">
        </p>
        <p>
            <label for="password">Password</label>
            <input id="password" name="password" type="password">
            <span>Enter a password longer than 8 characters</span>
        </p>
        <p>
            <label for="confirm_password">Confirm Password</label>
            <input id="confirm_password" name="confirm_password" type="password">
            <span>Please confirm your password</span>
        </p>
        <p>
            <input type="submit" value="SUBMIT" id="submit">
        </p>
    </form>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

4 Answers

Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

Hmm i have no idea...

is your form action supposed to be = # ?

did you try instead of using :

<input type="submit" value="SUBMIT" id="submit">

use the button element tag :

<button type="submit" value="SUBMIT" id="submit">SUBMIT</button>
Frederico Graciano
PLUS
Frederico Graciano
Courses Plus Student 2,768 Points
Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

Sorry I can't help you with javascript but maybe the problem is in your html file. double check it or post it here.

a k
a k
2,880 Points
a k
a k
2,880 Points

I just posted html. Thanks.

a k
a k
2,880 Points
a k
a k
2,880 Points

Thank you. It worked. I changed the action to go to URL instead of # and when I click on Submit it goes there. really appreciate it.

Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

No problem, glad i could help. Damn this javascript it's beautiful haha, i need to learn it, i know a little bit but i used it for gaming scripting in Unity 3D. How did you manage to learn all this stuff so fast? You've been studying all this courses all day long? haha