GreenMonster Posted June 3, 2016 Share Posted June 3, 2016 (edited) 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. :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 Link to comment Share on other sites More sharing options...
Ingolme Posted June 3, 2016 Share Posted June 3, 2016 So, what happens when you run that code? Did you have the Javascript console open to check for error messages? Link to comment Share on other sites More sharing options...
GreenMonster Posted June 3, 2016 Author Share Posted June 3, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted June 3, 2016 Share Posted June 3, 2016 Then you need to see what response contains. if(response == "login-success") { window.location.href = "dashboard.php"; } else { console.log(response); } Link to comment Share on other sites More sharing options...
GreenMonster Posted June 3, 2016 Author Share Posted June 3, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted June 3, 2016 Share Posted 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; }); }); Link to comment Share on other sites More sharing options...
GreenMonster Posted June 3, 2016 Author Share Posted 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. Link to comment Share on other sites More sharing options...
Ingolme Posted June 3, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
GreenMonster Posted June 4, 2016 Author Share Posted 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now