Disable an input with javascript. Checking the code

Question

I'm doing a client side in javascript and html. I have a problem. I want to check if password and repeat password are the same. In that case I want to disable an input. I saw some codes around but I don't understand why it doesn't work. Can you help me? Here is my HTML:

<input class="form-control form-stacked last" name="repeatPassword" id="repeat" placeholder="Repeat password" type="password">
<input class="btn btn-beats btn-block btn-stacked" value="Sign up" onkeydown="enable()" id = "btnPlaceOrder" type="submit">
<input class="form-control form-stacked" name="password" id = "password" placeholder="Password" type="password" required="true">

And then here is my javascript function:

var password = document.getElementById("password");
var repeat = document.getElementById("repeat");
   function enable(){
      if (password.value() == repeat.value()){
         document.getElementById("btnPlaceOrder").disabled = false;
      } else{
         document.getElementById("btnPlaceOrder").disabled = true;
      }
}

Just to be precise, I did the import of the javascript in my HTML

value is a property, not a method, so if(password.value == repeat.value) — pawel
– pawel, Commented Nov 21, 2014 at 9:26
Also, when things don't work always check your browser's console. In most cases there will be be an error message being logged. — Terry
– Terry, Commented Nov 21, 2014 at 9:28
@pp94 probably the onkeydown listener which responds to the keyboard, not the mouse. — pawel
– pawel, Commented Nov 21, 2014 at 9:28

pawel · Accepted Answer · 2014-11-21 09:34:46Z

3

HTML: Add listeners to the password inputs, so the submit button fill change its state as the user types.

<input id="password" type="password" onkeyup="enable()">
<input id="repeat" type="password" onkeyup="enable()">
<input value="Sign up"  id="btnPlaceOrder" type="submit">

JS

function enable(){
    // the comparison returns true or false so no need for if/else
    document.getElementById("btnPlaceOrder").disabled = password.value !== repeat.value;
}

Fiddle: http://jsfiddle.net/40vvL1em/

answered Nov 21, 2014 at 9:34

pawel

37.1k7 gold badges59 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pp94 Over a year ago

Amazing. Thanks man (sorry for the amount of functions I have for password and repeat)

pp94 Over a year ago

sorry but I have to wait 2 minutes (don't know why) to confirm that your answer is the right one...

cнŝdk · Accepted Answer · 2014-11-21 09:36:29Z

1

Well simply call your function in the onkeyup() event of your repeat input.

<input class="form-control form-stacked last" name="repeatPassword" id="repeat" placeholder="Repeat password" type="password" onkeyup="enable()">

And here's the JS function:

var password = document.getElementById("password").value;
var repeat = document.getElementById("repeat").value;
function enable(){
if (password === repeat){
  document.getElementById("btnPlaceOrder").disabled = false;
} 
else{
  document.getElementById("btnPlaceOrder").disabled = true;
}
}

That should do it.

answered Nov 21, 2014 at 9:36

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

4 Comments

cнŝdk Over a year ago

Ok, his JS approach is better but I think that you don't have to call enable()in the password input keyup event?

pp94 Over a year ago

absolutely I didn't want to say that your question is not better. I will check your solution

pp94 Over a year ago

Also your solution was right. Thanks @chsdk I want to give the green arrow (sorry I have no idea how to call it in english) to both of you );

cнŝdk Over a year ago

No, @pawel's answer is the most efficient but I just said that pratically there's no need to put the keyup event in the first password input

Collectives™ on Stack Overflow

Disable an input with javascript. Checking the code

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related