Checking password without clicking a button

Question

How can we redirect to another page after checking password without clicking on any button? After entering password it should check and automatically redirect to next specified page. Do I need to add any function in text-box input tag?

//This is my HTML code.

<div style="margin-top:27%;margin-left:40%;">
             <b><i>Enter pin</i></b>
 </div>
        <input type="password" id="pwd" autofocus required>

//This is the javascript.

<script>
function login()
{
    logged_in=false;
    var pin=documemt.getElementById("pwd").value();

    if(pin=="hotel")
    {
        logged_in=true;
        window.open("screen3.html","_self");
    }
    else
        alert("Please enter correct pin");
}
</script>

Not the best UX idea, imho. What if I stoppped typing for a moment to remember my password. Why should script check my password if it's half-entered? — dfsq, Feb 04 '14 at 08:42
You can consider attaching some event listeners like javascript onBlur or onKeyPress, etc. — quik_silv, Feb 04 '14 at 08:42
checking at client side if the password matches is a bad idee, dont — lordkain, Feb 04 '14 at 08:43
So what exactly distinguishes the "done entering password" event? — deceze, Feb 04 '14 at 08:49
Browsers automaticcaly bind the enter key with the submit of a form. If you have two fields, login, paswd and a submit button, if you press "Enter", it will act like if you have clicked the button. — TCHdvlp, Feb 04 '14 at 10:00

Jacek Kowalewski · Answer 1 · 2014-02-04T09:02:27.080

Maybe this isn't a fully technical answer, but it is worth to mention here.

NEVER store passwords in javascript manifestly. User can open this file and just read it. For Your question, there is an answer.

You must have a php file that can check the password (get from the post).

<?php if(isset($_POST['pass']) && $_POST['pass'] == 'hotel') echo "ok"; ?>

Then using for example Jquery and AJAX on every change in input send ajax request to this php file with posted password. Than compare downloaded file with "ok", and if OK, use javascript window.location.replace("new url");

This is one from milions of possible answers. But remember that You should set session and remember login person, and check it on every other site. In other case, someone can enter manually the same url, that You are redirecting, and password isn't needed.

Hope it helps Jacek

PS. this php file should also be protected for multiple password comparison, in other case it is easy to break easy passwords with bruteforce, knowing the mechanism.

PS 2. Nevertheless, in my opinion, You are doing something wrong, and this approach should be rethinked... My proposed answer also is very, very, very general. Too general.

UPDATE

Maybe better answer is to make a standart php script for logging with server verification and submit button. Then, using Javascript, hide submit button, and on input change simulate clicking it. But in that case, if password is wrong, the page should remember what the user has entered... It isn't difficult to write in php:

$input_value = isset($_POST['password']) ? $_POST['password'] : '';

But I really vote for leaving the submit button as the mother nature learned us ;). Thx for replies, best regards.

Thank You for your valuable suggestion. Actually I have entered the password in JavaScript just for time being. Still learning ajax. I will try out your suggestion. — Deepika, Feb 04 '14 at 08:52
No problem. I don't know the idea for what the password is, maybe it isn't anything that needs to be safe (game for example). But If it is, You should probably think about safety first, and then after usability and easy functioning. Best regards, and hopes I helped. — Jacek Kowalewski, Feb 04 '14 at 08:54
PS. My idea is very complicated, and I don't know if it is worth implementing. Maybe simple php form with php verification, and submit button... Is is just one click more. — Jacek Kowalewski, Feb 04 '14 at 08:56

score 0 · Answer 2 · edited Feb 04 '14 at 09:08

0

After validating your login data, use Response.Redirect("YourPage.aspx", False). It will redirect you to the page you specified.

edited Feb 04 '14 at 09:08

Rahil Wazir

10,007
11
42
64

answered Feb 04 '14 at 08:47

JKV

31
2

score 0 · Answer 3 · edited May 23 '17 at 10:25

First off you need a way to connect your input element to a function, if you don't want to use a submit button you could use some sort of on-change/on-keyup handler to detect input.

Javascript bind keyup/down event

In this function I'd recommend a better way of validation, like Jacek said.

When you figured out how to do that, you might want to take a look at this question:

How can I make a redirect page in jQuery/JavaScript?

score 0 · Answer 4 · answered Feb 04 '14 at 08:57

Use of onKeyUP Event of input text as below Example.

<input type="text" onKeyUP="login();" id="pwd">
<script>
function login()
{
   logged_in=false;
   var pin=documemt.getElementById("pwd").value();

   if(pin=="hotel")
   {
      logged_in=true;
      window.open("screen3.html","_self");
   }
   else
   {
      alert("Please enter correct pin");
   }
 }

</script>

Demo Of onkeyUp

.keyup()

I hope it will help you.

score 0 · Answer 5 · answered Feb 04 '14 at 09:07

When document is loaded or ready you can do $('#pwd').onkeypress = login(); to bind the login to the keypress handler of your pwd box.

When 'logged_in == true' You can do a 'window.location = "http://www.google.com"' to redirect to your target page.

I guess there should be some parameter (session id?) or similar to verify that the user not just used the url by hand.

Checking password without clicking a button

5 Answers5