What is wrong with my Jquery code? Trying to not reload form if passwords dont match

Question

I am trying to get my form not to reload if my password 1 and 2 dont match when I click submit. What is wrong with my code, attaching html and js.

<label for="password">Lösenord: </label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Lösenord" required>
        <p>
        </p>
        <label for="password2">Upprepa Lösenord: </label>
        <input type="password" class="form-control" id="password2" name="password2" placeholder="Lösenord" required>
        <p>
        </p>

$(document).ready( function() {

  $("#submit").click( function() {
    var password1 = $("#password");
    var password2 = $("#password2");
    alert(password2);
    if (password1 /= password2) {
      preventDefault();
    }

  });
});

UPDATE: Tried changing to "!=" and passwor.val(), still does not work..

Answer 1

If I recall correctly, you are only getting the reference to the DOM element. To get the value, you need to use .val()

You are also doing a division instead of a comparison. Your if statement comparison should be:

if (password1.val() !== password2.val()) {

You also need to pass the event object on your click listener. So overall, it should be:

  $("#submit").click( function(event) {
    var password1 = $("#password").val();
    var password2 = $("#password2").val();

    if (password1 !== password2) {
      event.preventDefault();
    }

  });

Answer 2

A part of attaching the click event to preventDefault() , The simple logic comparator != should be used in your example since it is agnostic to the object type, finally prevent true validation if fields are empty

 $("#submit").click( function(event) { var password1 = $("#password").val().length>0 ? $("#password").val() : 'a'; var password2 = $("#password2").val().length>0 ? $("#password2").val() : 'b'; //prevent true if empty if (password1 != password2) { event.preventDefault(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <form id="form" action=""> <label for="password">Lösenord: </label> <input type="password" class="form-control" id="password" name="password" placeholder="Lösenord" required> <p> </p> <label for="password2">Upprepa Lösenord: </label> <input type="password" class="form-control" id="password2" name="password2" placeholder="Lösenord" required> <p> <button id="submit">Ok</button> </p> </form>

Answer 3

Aside from the issues pointed out by @Joshua Robles,

Add an empty value attribute to your input fields like this:

<input type="password" class="form-control" id="password" name="password" placeholder="Lösenord" value="" required>

Full code and demo:

 $("#submit").click( function(event) { var password1 = $("#password").val(); var password2 = $("#password2").val(); if (password1 !== password2) { alert("Passwords don't match") event.preventDefault(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="password">Lösenord: </label> <input type="password" class="form-control" id="password" name="password" placeholder="Lösenord" value="" required> <p></p> <label for="password2">Upprepa Lösenord: </label> <input type="password" class="form-control" id="password2" name="password2" placeholder="Lösenord" value="" required> <p></p> <input type="submit" id="submit">