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!

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 Ashish Mehra
Ashish Mehra
Courses Plus Student 589 Points

what's wrong here in my code ?

can anyone help me why the button is on disabled mode even the condition set in function evaluates to true

<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>

$("span").hide();
var password = $("#password");
var confirm = $("#confirm_password");

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

function isPasswordmatched(){
    return password.val()===confirm.val();
}

function canSubmit(){
    return isPasswordvalid() && isPasswordmatched();
}

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

function checkedEvent(){

  if(isPasswordvalid()){
     password.next().hide();
  }else{
    password.next().show();
  }
}

function confirmEvent(){
    if(isPasswordmatched()){
       confirm.next().hide();
    }else{
       confirm.next().show();
    }
}



password.focus(checkedEvent).keyup(checkedEvent).keyup(confirmEvent);
confirm.focus(confirmEvent).keyup(confirmEvent);

modifySubmit();

2 Answers

Jeremy Castanza
Jeremy Castanza
12,080 Points
Jeremy Castanza
Jeremy Castanza
12,080 Points

I'm just learning jQuery myself, so bare with me. But on face value, you have an id selector for "submit" being called in your ModifySubmit function. Yet, I don't see any element with id="submit". Try adding id="submit" to the button and run the code again.

Ashish Mehra
Ashish Mehra
Courses Plus Student 589 Points

after adding id problem remain same

Jeremy Castanza
Jeremy Castanza
12,080 Points
Jeremy Castanza
Jeremy Castanza
12,080 Points

Try removing the exclamation point in your condition set. I was able to follow the logic of your code up to that point. In a way, the logic is like a double negative. I'm assuming that you only want to run ModifySubmit if CanSubmit returns false. If you can't get it to work, I would try using an if statement before the ModifySubmit function.