jQuery password login form

Question

I'm trying to create a very simple (No need for it to be 'safe') page with a login box.

When the user enters a password, I want the button to go to a certain URL. If the password is incorrect, it should display an alert.

This is my code so far;

 $(document).ready(function() { $('.login').click(function() { if ($('input:password').val() == "hello") { alert('Right Password!'); else alert('Wrong Password!'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="password" id="password" /> <input type="button" class="login" value="Continue" /> </form> 

What I expect my code to do: Put a click function on .login to check if : password is equal to 'hello' then go to a URL (used an alert for testing purpose) or else : alert a message.

Issues I'm having: No current response to the button at all. If enter is pressed after filling in the field, the page reloads. I want my user to be able to trigger the button with the enter key as well, is this possible?

I'm loading the script in before I end my body, and calling on the library in my head.

Answer 1

You're missing }else{ , and for the enter you can use keyup() and detect the key that is pressed using event.keyCode to trigger the click of the .login button:

 $(document).ready(function() { $('.login').click(function() { if ($('input:password').val() == "hello") { alert('Right Password!'); } else { alert('Wrong Password!'); } }); $('input:password').keyup(function(event) { event.preventDefault(); if (event.keyCode == 13) { $('.login').click(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="password" id="password" /> <input type="button" class="login" value="Continue" /> </form> 

For the redirect to an url you can use window.location.href = 'your url goes here';

Answer 2

Basically the problem is you are missing { brace.Because of this your code doesn't work.Try the below code

$(document).ready(function() {
  $('.login').click(function() {
    if ($('input:password').val() == "hello") {
      alert('Right Password!');
    } else {
      alert('Wrong Password!');
    }
  });
});

Answer 3

If enter is pressed after filling in the field, the page reloads.

The page reloads on clicking the enter key, as the form is submitted - you can disable that using this:

$("form").submit(function(event) {
  event.preventDefault();
});

(Note that in snippet , due to restrictions you can't check form submit)

To listen for the enter key as well, you can use this:

$('input:password').keyup(function(event) {
  if (event.keyCode == 13) {
    $('.login').click(); // trigger click
  }
});

See demo below:

 $(document).ready(function() { // this prevents page reload on pressing enter $("form").submit(function(event) { event.preventDefault(); }); // click listener $('.login').click(function() { if ($('input:password').val() == "hello") { alert('Right Password!'); } else { alert('Wrong Password!'); } }); // respond to enter key $('input:password').keyup(function(event) { if (event.keyCode == 13) { $('.login').click(); // trigger click } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="password" id="password" /> <input type="button" class="login" value="Continue" /> </form>