Need help with ajax login script with jQuery, php mySQL

GreenMonster · June 3, 2016

Not sure if this is the right section, but I need help with regarding using JQuery AJAX for loading data from php and passing data back to php. I have been trying and searching the web for about 12 hours and couldn't seem to get it to work. :angry: :Sad:

Currently this is my code checkLogin.php:

<?php 
require_once ('assets/php/database.php');

    if(!isset($_SESSION)) {
        session_start(); 
    }

    if(isset($_POST['loginBtn'])) {
        $username = $_POST['loginUser']; 
        $password = $_POST['loginPass']; 
        
        $username = stripslashes($username);
        $password = stripslashes($password);
        $username = mysqli_real_escape_string($dbconn, $username);
        $password = mysqli_real_escape_string($dbconn, $password);
        
        $sql = "SELECT * FROM studnettb WHERE username='$username' AND password='$password'";
        $result = mysqli_query($dbconn, $sql);
        $count = mysqli_num_rows($result);
        $ret = mysqli_fetch_assoc($result);
        
        if($count > 0) {
            /*Store Session */
            $name = $ret['realname'];
            $_SESSION['realname'] = $name;
            
            $email = $ret['email'];
            $_SESSION['email'] = $email;
            
            $_SESSION['login'] = true;
            echo "login-success";
            //header("location: dashboard.php");
        }
        
        else {
            $activeLogin = 'active';
            echo('<script src="assets/js/login-error.js"></script>');
        }
    }
?>

and this is my checkLogin.js:

$('document').ready(function() {
    var form = $('#loginForm');
    
    form.submit(function(event){
        
        $.ajax({
            type: 'POST',
            url: 'checkLogin.php',
            data: form.serialize(),
            dataType: 'json',
            success: function(response){
                if(response == "login-success") {
                    window.location.href = "dashboard.php";
                }
            }
        });
        return false;
    });
});

Edited June 3, 2016 by GreenMonster

Ingolme · June 3, 2016

So, what happens when you run that code?

Did you have the Javascript console open to check for error messages?

GreenMonster · June 3, 2016

There isn't any error on the console. Basically, what I wanted it to do it's when I click on submit, the ajax it's supposed to pass the data to checkLogin.php and if the php echos login-success it should redirect to dashboard.php but when I click on submit it doesn't redirect to dashboard.php, instead it stays on index.php

If I were to comment out <script type="text/javascript" src="checkLogin.js"></script> and use require_once('checkLogin.php'); only it works fine though, but I am required to use ajax/jquery along with php for my assignment.

index.php:

<html>
    
    <!-- PHP -->
    <?php
        if(!isset($_SESSION)) { 
            session_start(); 
        }
        
        /* Title */
        $title = ' - Welcome';
    
        include_once('head.php');
        //require_once('checkLogin.php');
        require_once('assets/php/registerUser.php');
        require_once('assets/php/forgotPassword.php');
    ?>
    
    <body class="index">    
        <script type="text/javascript" src="checkLogin.js"></script>
        <!-- Import index.js -->
        <script type="text/javascript" src="assets/js/index.js"></script>
        
        <!-- Navigation -->
        <div class="navbar-fixed">
            <nav>
                <div class="nav-wrapper light-blue">
                    <div class="brand-logo center">
                        <img src="assets/images/SMSLogo.png" class="logo-img">
                        <span class="logo-txt">Student Management System</span>
                    </div>

                    <ul class="left nav">
                        <li>
                            <a data-activates="side-nav" class="side-nav-btn"><i class="material-icons"></i></a>
                        </li>
                    </ul>

                    <!-- Mobile Side-Nav -->
                    <ul id="side-nav" class="side-nav z-depth-2">
                        <li>
                            <a class="light-blue-text" onclick="tabLogin();">
                                Login
                            </a>
                        </li>

                        <li>
                            <a class="light-blue-text" onclick="tabReg();">
                                Register
                            </a>
                        </li>

                        <li>
                            <a class="light-blue-text" onclick="tabForgot();">
                                Forgot Password?
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        
        <!-- Content -->
        <div class="container">
            <div class="index row">
                <div class="col s12 m12 l8 push-l2 pull-l2">
                    <ul class="tabs z-depth-1">
                        <li class="tab col s4"><a class="light-blue-text <?php echo $activeLogin; ?>" href="#login">Login</a></li>
                        <li class="tab col s4"><a class="light-green-text <?php echo $activeReg; ?>" href="#register">Register</a></li>
                        <li class="tab col s4"><a class="red-text text-lighten-2 <?php echo $activeForgot; ?>" href="#forgot">Forgot Password?</a></li>
                    </ul>
                    
                    <!-- Login Card -->
                    <div id="login" class="col s12">
                        <div class="login card">
                            <div class="card-image z-depth-1">
                                <img src="assets/images/SMSTitleLogin.png">
                                <span class="card-title">
                                    <i class="material-icons"></i>Login
                                </span>
                            </div>
                            <form id="loginForm" method="post">
                                <div class="card-content">
                                    <div class="input-field">
                                        <input name="loginUser" id="loginUser" type="text" class="validate">
                                        <label for="loginUser">Username</label>
                                    </div>
                                    <div class="input-field">
                                        <input name="loginPass" id="loginPass" type="password" class="validate">
                                        <label for="loginPass">Password</label>
                                    </div>
                                </div>
                                <div class="card-action">
                                    <div class="row" style="margin:0!important;">
                                        <button name="loginBtn" value="loginForm" class="btn waves-effect waves-light blue right" type="submit">Login
                                            <i class="material-icons right"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <!-- Register Card -->
                    <div id="register" class="col s12">
                        <div class="register card">
                            <div class="card-image z-depth-1">
                                <img src="assets/images/SMSTitleLogin.png">
                                <span class="card-title">
                                    <i class="material-icons"></i> Register
                                </span>
                            </div>
                            <form method="post">
                                <div class="card-content">
                                    <div class="row">
                                        <div class="input-field col s6">
                                            <input name="regUser" id="regUser" type="text" class="validate">
                                            <label for="regUser">Username *</label>
                                        </div>
                                        <div class="input-field col s6">
                                            <input name="regPass" id="regPass" type="password" class="validate">
                                            <label for="regPass">Password *</label>
                                        </div>
                                        <div class="input-field col s12">
                                            <input name="regName" id="regName" type="text" class="validate">
                                            <label for="regName">Full Name *</label>
                                        </div>
                                        <div class="input-field col s12">
                                            <input name="regEmail" id="regEmail" type="email" class="validate">
                                            <label for="regEmail">Email *</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-action">
                                    <div class="row" style="margin:0!important;">
                                        <button name="regBtn" value="regForm" for="regForm" class="btn waves-effect waves-light light-green right" type="submit">Register
                                            <i class="material-icons right"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <!-- Forgotten Password Card -->
                    <div id="forgot" class="col s12">
                        <div class="forgot card">
                            <div class="card-image z-depth-1">
                                <img src="assets/images/SMSTitleLogin.png">
                                <span class="card-title">
                                    <i class="material-icons"></i>Forgot Password?
                                </span>
                            </div>
                            <form method="post">
                                <div class="card-content">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <input name="forgotUser" id="forgotUser" type="text" class="validate">
                                            <label for="forgotUser">Username *</label>
                                        </div>
                                        <div class="input-field col s12">
                                            <input name="forgotEmail" id="forgotEmail" type="email" class="validate">
                                            <label for="forgotEmail">Email *</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-action">
                                    <div class="row" style="margin:0!important;">
                                        <button name="forgotBtn" value="forgotForm" for="forgotForm" class="btn waves-effect waves-light red right" type="submit">Forgot Password
                                            <i class="material-icons right"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <div id="passRet" class="modal bottom-sheet">
                        <div class="modal-content">
                            <h4>Your Login Credentials</h4>
                             <ul class="collection">
                                 <li class="collection-item avatar">
                                     <i class="material-icons circle light-blue"></i>
                                     <span class="title" style="font-weight:500;">Username</span>
                                     <p>
                                         <?php echo $_SESSION['fUser']; ?>
                                     </p>
                                 </li>

                                 <li class="collection-item avatar">
                                     <i class="material-icons circle light-blue"></i>
                                     <span class="title" style="font-weight:500;">Password</span>
                                     <p>
                                         <?php echo $_SESSION['fPass']; ?>
                                     </p>
                                 </li>
                                 
                                 <li class="collection-item avatar">
                                     <i class="material-icons circle light-blue"></i>
                                     <span class="title" style="font-weight:500;">Email</span>
                                     <p>
                                         <?php echo $_SESSION['fEmail']; ?>
                                     </p>
                                 </li>
                            </ul>
                        </div>
                        <div class="modal-footer">
                            <button style="margin-right:20px;" class=" modal-action modal-close btn waves-effect waves-light light-blue" onclick="assets/php/destroy_session.php">
                                To Login
                                <i class="material-icons right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

head.php:

    <head>
        <!-- Title -->
        <title>SMS<?php echo $title ?></title>

        <!-- Import Google Icon Font -->
        <link href="assets/css/material-icons.css" rel="stylesheet">
        <!-- Import materialize.css -->
        <link type="text/css" rel="stylesheet" href="assets/css/materialize.min.css" media="screen,projection"/>

        <!-- Import Google Fonts -->
        <link href="assets/css/raleway.css" rel="stylesheet">
        <link href="assets/css/roboto.css" rel="stylesheet">

        <link href="assets/css/style.css" rel="stylesheet">


        <!-- Let browser know website is optimized for mobile -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <!-- Import Materialize Framework -->
        <script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="assets/js/materialize.min.js"></script>
    </head>

Edited June 3, 2016 by GreenMonster

Ingolme · June 3, 2016

Then you need to see what response contains.

if(response == "login-success") {
  window.location.href = "dashboard.php";
} else {
 console.log(response);
}

GreenMonster · June 3, 2016

So I did what you suggested and added console.log(response); and it's not show anything in the console. So I simplify the checkLogin.js code to test if the login button is working but apparently when I click on the login button nothing is happening at all.

checkLogin.js:

$('document').ready(function() {
    var form = $('#loginForm');
    
    form.submit(function(event){
        console.log('response');
    });
});

index.php (login code only):

                    <!-- Login Card -->
                    <div id="login" class="col s12">
                        <div class="login card">
                            <div class="card-image z-depth-1">
                                <img src="assets/images/SMSTitleLogin.png">
                                <span class="card-title">
                                    <i class="material-icons"></i>Login
                                </span>
                            </div>
                            <form id="loginForm" method="post">
                                <div class="card-content">
                                    <div class="input-field">
                                        <input name="loginUser" id="loginUser" type="text" class="validate">
                                        <label for="loginUser">Username</label>
                                    </div>
                                    <div class="input-field">
                                        <input name="loginPass" id="loginPass" type="password" class="validate">
                                        <label for="loginPass">Password</label>
                                    </div>
                                </div>
                                <div class="card-action">
                                    <div class="row" style="margin:0!important;">
                                        <button name="loginBtn" value="loginForm" class="btn waves-effect waves-light blue right" type="submit">Login
                                            <i class="material-icons right"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

Edited June 3, 2016 by GreenMonster

Ingolme · June 3, 2016

Are you preventing the actual form from submitting?

If you don't then it's going to reload the page and all Javascript will stop working.

Try this code for testing:

$('document').ready(function() {
    var form = $('#loginForm');
    
    form.submit(function(event){
        
        $.ajax({
            type: 'POST',
            url: 'checkLogin.php',
            data: form.serialize(),
            dataType: 'json',
            success: function(response){
                if(response == "login-success") {
                    window.location.href = "dashboard.php";
                } else {
                    console.log(response);
                }
            },
            error: function(request, status) {
              console.log("Error: " + status);
            }
        });
        return false;
    });
});

GreenMonster · June 3, 2016

I tried the code you gave me and I am getting a parsererror but if I were to remove the dataType: 'json', line the error stops showing up.

Ingolme · June 3, 2016

The server is not returning JSON, so the data type should be something else. What response is the server actually giving? Check the network tab of the browser's developer tools to see what the response is.

GreenMonster · June 4, 2016

Thanks for the help Ingolme. After doing more research on the web and all, I manage to get my code working and what I wanted to do. Thanks a lot for the help.

Sign In

Need help with ajax login script with jQuery, php mySQL

Recommended Posts

GreenMonster

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

GreenMonster

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

GreenMonster

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

GreenMonster

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

GreenMonster

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity