Ajax jquery based login using php

Question

I am using php based login form with ajax and jquery following is my login form

<form role="form" id="login_Form" action="login.php" method="POST">
            <fieldset>
                <h2>Please Sign In</h2>
                <hr class="colorgraph">
                <div class="form-group">
                    <input type="text" name="login_username" id="username" class="form-control input-lg" placeholder="Username">
                </div>
                <div class="form-group">
                    <input type="password" name="login_password" id="password" class="form-control input-lg" placeholder="Password">
                </div>
                <hr class="colorgraph">

<div id="ack"> </div>

                <hr class="colorgraph">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6">
                       <!-- <input type="submit" class="btn btn-lg btn-success btn-block " id="submit" value="Sign In"/> -->
                        <button type="submit" id="submit" class="btn btn-lg btn-success btn-block" name="submit">Login</button>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <a href="" class="btn btn-lg btn-primary btn-block">Register</a>
                    </div>
                </div>
            </fieldset>
        </form>

and my ajax code for login in

$("button#submit").click(function () {

if ($("#username").val() == "" || $("#password").val() == "")

    $("div#ack").html("Please Enter Username and Password !");

else 

    $.post($("#login_Form").attr("action"),
    $("#login_Form:input").serializeArray(),
    function (data) 
    {

        $("div#ack").html(data);

    });     

    $("#login_Form").submit(function () {

    return false;
    });




});

and my php code for login is :

<?php

$mysql_id = mysql_connect('localhost', 'root', '');
mysql_select_db('msbte', $mysql_id);



$username = ($_POST['login_username'];
$password = $_POST['login_password'];   

$sql = "select count(*) from login_user where (username='$username' and password='$password')"; 

$result = mysql_query($sql);

$row = mysql_fetch_array($result);

if($row[0] > 0) 

echo "Login Successful !";

else 

echo "Login Failed !";


?>

Whenever i login using my username and password it gives error as

Notice: Undefined index: login_username in /opt/lampp/htdocs/login.php on line 7

Notice: Undefined index: login_password in /opt/lampp/htdocs/login.php on line 8 Login Failed !

Can anbody tell me whats wrong with my code.

you have done wrong code. First try to search from google. wrong hints in 2 points. 1) form action. 2) check javascript part — Ripa Saha
– Ripa Saha, Commented Jan 27, 2014 at 7:58
Please escape the data before using it in a Query, or use prepared statements (PDO or Mysqli). You'r script is open for sql-injections. — Jite
– Jite, Commented Jan 27, 2014 at 8:03
Also, it looks like you are using plain text passwords. You should never do this, see here for more: sitepoint.com/password-hashing-in-php. Sorry, not the point of your question but just trying to help you out :) — jd182
– jd182, Commented Jan 27, 2014 at 8:06

Krish R · Accepted Answer · 2014-01-27 08:02:14Z

1

Try this, You need use isset()

<?php 
 if(isset($_POST['login_username']) && isset($_POST['login_password'])){
    $username = $_POST['login_username'];
    $password = $_POST['login_password'];       
    $sql = "select count(*) from login_user where (username='$username' and password='$password')";     
    $result = mysql_query($sql);        
    $row = mysql_fetch_array($result);      
    if($row[0] > 0) 
        echo "Login Successful !";      
    else        
        echo "Login Failed !";

 }else{
  echo "no pot values";

}

?>

answered Jan 27, 2014 at 8:02

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cas Bloem · Accepted Answer · 2014-01-27 08:02:31Z

$ _POST or $ _GET are two special functions of PHP that are used to get variables from a user-filled form. While using these functions, a user may encounter an error - Notice: Undefined index. This error can be avoided with the help of PHP isset (). This error will be notified, but that depends on the configuration of the server. Notice: Undefined index is a minor error and hence not notified by default. With the help of the error_reporting function, the type of error reported can be changed.

if (isset($_POST['login_username']) && isset($_POST['login_password']))    
{    
          // Instructions if $_POST['login_username'] and $_POST['login_password'] exist 
}

You should also consider using PHP PDO. (see more: http://www.php.net/manual/en/book.pdo.php)

Jai · Accepted Answer · 2014-01-27 08:06:34Z

1

I suggest you 3 things to change little bit:

1. Move the login form submit function outside of button's context

$("#login_Form").submit(function () {
    return false;
});

The above piece of code should be outside of button's click.

2. change this line:

$("#login_Form:input").serializeArray(),

to this:

$("#login_Form").serializeArray(),

3. Now in your php part you have to to do this:

$username = ($_POST['login_username'];
       //---^-------------------------here is some issue, remove it '('
       // so it should be like below one

$username = $_POST['login_username'];

answered Jan 27, 2014 at 8:06

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Magnus Engdal · Accepted Answer · 2014-01-27 08:10:54Z

1

Seems like you have a ( too much on this line:

$username = ($_POST['login_username'];

Also some changes to your jQuery

$("button#submit").click(function () {
    if ($("#username").val() == "" || $("#password").val() == "") {
        $("div#ack").html("Please Enter Username and Password !");
    } else {
        $.post($("#login_Form").attr("action"),
        $("#login_Form").serializeArray(),

        function (data) {
            $("div#ack").html(data);
        });
    }

    return false;
});

edited Jan 27, 2014 at 8:10

answered Jan 27, 2014 at 7:59

Magnus Engdal

5,6343 gold badges37 silver badges51 bronze badges

Comments

Vlad Nikitin · Accepted Answer · 2014-01-27 08:01:00Z

0

$("#login_Form:input").serializeArray(),

has to be

$("#login_Form input").serializeArray(),

also check network dev tools tab to be sure the right post params are sent to the server

answered Jan 27, 2014 at 8:01

Vlad Nikitin

1,96115 silver badges17 bronze badges

Collectives™ on Stack Overflow

Ajax jquery based login using php

5 Answers 5

Comments

Comments

1. Move the login form submit function outside of button's context

2. change this line:

3. Now in your php part you have to to do this:

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1. Move the login form submit function outside of button's context

2. change this line:

3. Now in your php part you have to to do this:

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related