Comparing Password in Javascript

Question

I'm comparing password in javascript and someone its not working its working on my past project before here is the HTML

<form>
        <label>
            <strong>Username</strong>
            <input type="text" name="">
        </label>
        <label>
            <strong>Password</strong>
            <input type="password" name="" id="password">
        </label>
        <label>
            <strong>Confirm Password</strong>
            <input type="password" name="" id="confirmpassword"> 
        </label>
        <button class="button" type="submit" id="button" onclick="click();">Submit</button>
    </form>

and here is javascript

function click (){
    var password =  document.getElementID('password').value,
    confirmpassword =   document.getElementID('confirmpassword').value

    if (password == ""){
        alert("Field cannot be empty.");

        
    }
    else if (password != confirmpassword){
        alert("Password didnt match try again.");
        return false

    }
    else if(password == confirmpassword){
        alert("Password Match")
        
    }
    return false
}

What exactly do you mean by when it is not working? Is it always showing- "Password Match" or one of the alerts that you have? — adzo261, Dec 19 '20 at 14:10
What's the intended purpose of the function returning `false` at seemingly random places? — Álvaro González, Dec 19 '20 at 14:12
Related question (and maybe a duplicate, although this code has some other bugs): https://stackoverflow.com/questions/4388443/javascript-function-name-cannot-set-as-click — Álvaro González, Dec 19 '20 at 14:18

score 2 · Answer 1 · answered Dec 19 '20 at 14:11

2

You are using getElementID to get password field value, but there is no document.getElementID function.

It should be document.getElementById to get that field value.

answered Dec 19 '20 at 14:11

Everest Climber

1,203
1
9
15

score 0 · Answer 2 · answered Dec 19 '20 at 14:11

0

Try adding onSubmit to the form tag and call the function there instead of in the submit button Example:

<form name="myForm" onsubmit="return click();">

And remove the onClick from submit button

And it is not getElementID. It is getElementById()

answered Dec 19 '20 at 14:11

Vishnu Vinod

603
4
15

stil not working should i erase the return false – Janel Sangalan Dec 19 '20 at 14:17

score 0 · Answer 3 · answered Dec 19 '20 at 14:21

You can try this:

HTML:

<form id="form-id">
        <label>
            <strong>Username</strong>
            <input type="text" name="">
        </label>
        <label>
            <strong>Password</strong>
            <input type="password" name="" id="password">
        </label>
        <label>
            <strong>Confirm Password</strong>
            <input type="password" name="" id="confirmpassword"> 
        </label>
        <button id="your-id">submit</button>
    </form>

JS:

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  var password = document.getElementById("password").value,
    confirmpassword = document.getElementById("confirmpassword").value;

  if (password == "") {
    alert("Field cannot be empty.");
  } else if (password != confirmpassword) {
    alert("Password didnt match try again.");
    return false;
  } else if (password == confirmpassword) {
    alert("Password Match");
    form.submit();
  }
});

score 0 · Answer 4 · answered Dec 19 '20 at 14:25

you should change your function name because 'click' not working change it to for example submit and it works fine;

function submit (){
    var password =  document.getElementById('password').value,
    confirmpassword =   document.getElementById('confirmpassword').value

    if (password == ""){
        alert("Field cannot be empty.");

        
    }
    else if (password != confirmpassword){
        alert("Password didnt match try again.");
        return false

    }
    else if(password == confirmpassword){
        alert("Password Match")
        
    }
    return false
}

        <label>
            <strong>Username</strong>
            <input type="text" name="">
        </label>
        <label>
            <strong>Password</strong>
            <input type="password" name="" id="password">
        </label>
        <label>
            <strong>Confirm Password</strong>
            <input type="password" name="" id="confirmpassword"> 
        </label>
        <button class="button" type="button" id="button" onclick="submit();">Submit</button>

Wow thank you so much so when i encounter somthing like this i should just change the function name? — Janel Sangalan, Dec 19 '20 at 14:58
see this question -> https://stackoverflow.com/questions/4388443/javascript-function-name-cannot-set-as-click — barzin.A, Dec 19 '20 at 15:36

Comparing Password in Javascript

4 Answers4