Login without clicking submit

Question

so I'm working on this project in which I made an admin area. While I was working on the login functionality, I wanted a feature like this :- As soon as the user fills all the entries (Username and Password), the system automatically logs him in. He doesn't need to hit the submit button. Similarly, he should be given an error message if the password was incorrect. How can I achieve this functionality ? I guess it could be done via jQuery and Ajax, and I have nil knowledge in both of them. If anybody could guide me in the correct direction, it would be great.

Admin_login.php

<form class="form-horizontal" action="****" method="post" id="login">
                        <fieldset>
                            <div class="input-prepend" title="Username" data-rel="tooltip">
                                <span class="add-on"><i class="icon-user"></i></span><input autofocus class="validate[required] text-input, input-large span10" name="username" id="username" type="text" placeholder="Username"/>
                            </div>
                            <div class="clearfix"></div>

                            <div class="input-prepend" title="Password" data-rel="tooltip">
                                <span class="add-on"><i class="icon-lock"></i></span><input class="validate[required] text-input, input-large span10" name="password" id="password" type="password" placeholder="password"/>
                            </div>
                            <div class="clearfix"></div>
                            <div class="clearfix"></div>
                            <p class="center span5">
                            <button type="submit" class="btn btn-primary">Login</button>

                            </p>
                        </fieldset>
                    </form>

Database Table

Column Name    Type
Username        VARCHAR
Password        VARCHAR

How do you propose to detect when the user has finished inputting their credentials? What if their password is 2 characters? 10? 20? — Tom Walters, Apr 19 '14 at 13:29
@TomWalters Good questions! We can have this option. We can have a submit button in place. Then, as soon as the user tabs to the submit button (or focus from password is shifted), the script should execute and process. — NetStack, Apr 19 '14 at 13:33
Then on Hitting tab of Password field ,Submit field via ajax ,its simple. — Pratik Joshi, Apr 19 '14 at 13:38
Then it's good idea to check out [an introduction to jQuery](http://ejohn.org/apps/workshop/intro/). — Tom Walters, Apr 19 '14 at 13:38
This is a bad idea, it's a lot of work for something that users aren't expecting and goes against basic ui design. If you are trying to bypass having a submit event that redirects the page, this isn't the best approach. Also, what if the user hits enter key? Or has autofill enabled and has to manually focus on the password field so they can blur? — Anthony, Apr 19 '14 at 13:58

score 1 · Answer 1 · edited Sep 08 '14 at 10:19

1

I wrote a git.
This is the link: https://github.com/FabioSorre/HTML-PHP-AJAX-JQUERY-JS

The steps are these:

Html: No form action (action="") and specify method (Client-side)
Javascript/Jquery: onSubmit function call (Client-side)
Setup JSON callback (Client-side)
Php file (set json_encode, the operations and response(s)) (Server-side)
Show the results (Client-side)

edited Sep 08 '14 at 10:19

BenMorel

34,448
50
182
322

answered Apr 19 '14 at 13:42

FabioSorre

310
3
11

Setting action to empty just means the browser will submit to current location. What if JavaScript is disabled? – Anthony Apr 19 '14 at 14:00
Nice question, but the unique method that you can do it is using Ajax (asynchronous javaScript and xml) it's a group of web development techniques. Putting action="" it's just the first step to don't have conflicts between html and javascript, because you will receive the submit form in javascript (e.g. with jquery - $(form).submit(call ajax). So, if Javascript is disable, you can put in top of your web page – FabioSorre Apr 19 '14 at 14:08
Or you can just leave the action as where the form should go if js is disabled and override the submit event to use ajax instead of a normal form submit – Anthony Apr 19 '14 at 14:12

score 0 · Answer 2 · answered Apr 19 '14 at 13:50

Try using setInterval() that executes a function that checks if both fields are filled every 100MS. Please not this is a dirty hack. I would suggest using better validation methods. Google can help u with that

<script>

function checkCompleteness(){
    if($('#username').val()!=='' || $('#password').val()!==''){

    //POST DATA HERE MAYBE WITH AJAX OR TRIGER SUBMIT(GOOGLE HOW)
    $.post(
        'my/endpoint',
    {

        username:$('#username').val(),
        password: $('#password').val()

    }, function(response){
        // ACT ON RESPONSE STATUS
    });
}

//CHECK BOTH FIELDS EVERY 100 MS
setInterval(checkCompleteness(), 100);

</script>

score 0 · Answer 3 · edited May 23 '17 at 12:20

Ok so I'm thinking a little out loud but I hope this guides you to the right direction.

Let's assume that when you are logging in you type a character at maybe 1 sec delay. Let's assume that when the user finishes typing the Password, 2 or 3 seconds will pass. You can make a listener that waits for 2 seconds to pass after the password is typed and then trigger the submit file. Of course you should check that the username is also typed (min characters and not empty exception).

You can make the 2 second listener like this:

Javascript code:

// Trigger a callback function after a given time
var wait = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

// Trigger the submit via AJAX

wait(function(){
        // form validation

        $.ajax({
            url: '/Admin_login.php',
            type: 'POST',
            dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
            data: {
                username: $('#username').val(),
                password: $('#password').val()
            },
        })
        .done(function() {
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });

    }, 2000); // It submits the form via AJAX after 2 seconds have passed since 
              // the user typed something in the password field

Admin_login.php

The PHP part is more of a sketch but I hope you understand the idea behind it

<?php

$username = $_POST['username'];
$password = $_PSOT['password'];

//some more forom validation

$loggedin = login($username, $password);

if ($loggedin) {
    // Loggedin
}
else {
    // renegerate form
}

?>

P.S. Don't forget to avoid SQL injection and escape any special characters, some more information about this topic here: How can I prevent SQL injection in PHP?

Keep me posted and good luck! :)

Login without clicking submit

3 Answers3