Login form using PHP and JQuery to validate login information from MySQL database

Question

I have a login form that uses JQuery and PHP to validate a username and password. I am trying to switch over from extension mysql to mysqli for better practice and am having a lot of trouble. I think the error exists in the JQuery somewhere because I've tested the login.php validation and it works fine.

So here is my code:

index.php:

<!doctype html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){

                $("#login_a").click(function(){    
                    $("#shadow").fadeIn("normal");
                    $("#login_form").fadeIn("normal");
                    $("#user_name").focus();
                });

                $("#cancel_hide").click(function(){
                    $("#login_form").fadeOut("normal");
                    $("#shadow").fadeOut();
                });

                $("#login").click(function(){

                    var username=$('#user_name').val();
                    var password=$('#password').val();

                    $.ajax({
                        type: "POST",
                        url: "login.php",
                        data: "name="+username+"&pwd="+password,
                        success: function(html){

                            if(html=='true'){
                                $("#login_form").fadeOut("normal");
                                $("#shadow").fadeOut();
                                $("#profile").html("<a href='logout.php' id='logout'>Logout</a>");
                            }
                            else{
                                $("#add_err").html("*Wrong username or password");
                            }
                        },
                        beforeSend:function(){
                            $("#add_err").html("Loading...")
                        }
                    });
                return false;
                });
            });
        </script>

    </head>

    <body>
        <?php session_start(); ?>
        <div id="profile">
            <?php if(isset($_SESSION['user_name'])){ ?>
            <a href='logout_script_2.php' id='logout'>Logout</a>
            <?php }else {?>
            <a id="login_a" href="#">login</a>
            <?php } ?>
        </div>

        <div id="login_form">
            <form action="login_script_2.php" method="POST">
                <label>User Name:</label>
                <input type="text" id="user_name" name="user_name" />
                <label>Password:</label>
                <input type="password" id="password" name="password" />
                <label></label><br/>
                <input type="submit" id="login" value="Login" />
                <input type="button" id="cancel_hide" value="Cancel" />
            </form>
        <div class="err" id="add_err"><br></div>
        </div>
        <div id="shadow" class="popup"></div>
    </body>
</html>

login.php

<?php
    session_start();
    $con = mysqli_connect("localhost","root","PW","db") or die("Connection error: " . mysqli_error($con));

    if(isset($_POST['submit'])){
        $username = $_POST['name'];
        $password = $_POST['pwd'];

        $stmt = $con->prepare("SELECT * FROM tapp_login WHERE username = ? AND password = ? LIMIT 1");
        $stmt->bind_param('ss', $username, $password);
        $stmt->execute();
        $stmt->bind_result($username, $password);
        $stmt->store_result();
        if($stmt->num_rows == 1)
        {
            if($stmt->fetch())
            {
                $_SESSION['Logged'] = 1;
                $_SESSION['user_name'] = $username;
                echo 'Access granted';
                exit();
            }
        }
        else {
            echo "*Wrong username or password";
        }
        $stmt->close();
    }
    else {   

    }
    $con->close();
?>

logout.php

<?php
    session_start();
    unset($_SESSION['user_name']);
    header('Location: index.php');
?>

All the attempts to run the code give me the error in the JQuery validation "*Wrong username or password". Thanks in advanced!

Sean · Accepted Answer · 2014-01-07 14:40:43Z

2

When logging in using ajax, you are not posting submit, so this line

if(isset($_POST['submit'])){

is never true so your code never executes.

Either change it to

if(isset($_POST['name'])){

or add it to your ajax posted data

data: "submit=true&name="+username+"&pwd="+password,

edited Jan 7, 2014 at 14:40

answered Nov 1, 2013 at 0:33

Sean

12.4k3 gold badges31 silver badges49 bronze badges

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

5 Comments

Rob Over a year ago

Thanks for the tip. I tried both methods and still getting the same error. Any other thoughts?

Sean Over a year ago

have you checked your console log to see what is being returned in your success - html?

Rob Over a year ago

I'm not sure how to do that, could you elaborate please?

Sean Over a year ago

depending on your browser you will do go something like Tools->Developer Tools->Javascript Console. Or if you are using Firefox you use Firebug. As a simple debugging you can just do alert(html) inside your success: function(html){ alert(html); ... to see what is being returned.

Rob Over a year ago

Error was actually very small... I needed an echo 'true' and echo 'false' in the login.php, but you were originally right with posting with the type='submit'. THANK YOU

StackSlave · Accepted Answer · 2013-11-01 00:45:54Z

0

AJAX is a partial submission. Make sure you're firing it without using a submit button, or return false; inside your click function, at the bottom. I would use <input type='button' id='login_a' />, if it's not a link. Additionally, you are not setting your submit button, like @Sean said, because it's AJAX.

answered Nov 1, 2013 at 0:45

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

Login form using PHP and JQuery to validate login information from MySQL database

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related