Trouble with AJAX login call

Question

I'm trying to implement a simple login form with an AJAX call that redirects to a page where I query the database I have and then redirect the user to the index page or back to the login page.

HTML:

<form method="post">
<h4> Please Login </h4>
    <input id="user" class="name" type="text" placeholder="Enter Username"/>
    <input id = "pass" class="pw" type="password" placeholder="Enter Password"/>
    <ul>
        <li><a href="#">Forgot your password?</a></li>
        <li><a href="#">Please Register Here</a></li>
    </ul>
    <input class="hvr-shrink" id="submitlogin" type="submit" value="Log in"/>
</form>

jQuery/AJAX:

$("#submitlogin").click(function() {
    var $username = document.getElementById("user").value;
    var $pass = document.getElementById("pass").value;
    $.ajax ({
        url: "login_request.php",
        type: "POST",
        data: {
           'username' : $username,
           'password' : $pass
        }
    });
});

login_request.php

 include "connect.php";
 $myusername = mysqli_real_escape_string($db,$_POST['username']);
 $mypassword = mysqli_real_escape_string($db,$_POST['password']); 

$sql = "SELECT username, password FROM `CGSB_Compliance`.`nd_users` WHERE username = '$myusername' AND password = '$mypassword'";
$result = mysqli_query($db, $sql);
$count = mysqli_num_rows($result);

if($count == 1){
    $_SESSION['user'] = $myusername;
    header("location:index.php");
} else {
    header("location:login.php");
}

I have a table with one username and password, and every time I login, it just refreshes the login page. I checked my code a few times now and I can't seem to find the reason as to why it's not working. I have a feeling it's a silly mistake on my part but I looked at lots of examples and they all have pretty much the same thing. Any help is appreciated.

Answer 1

Hi I have tried your code the problem is that your ajax request not going to your login page. Also dont use $ sign in javascript variables use var or nothing. Also may be you have not call jQuery library.

I have tried this and run myself. Please try this one. Don't hesitate to mark it as your answer if you find your solution.

// download file and save in your file if you are not connected to net and include with correct path

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <Script>
    $(document).ready(function(){

    $("#postsubmit").click(function(e) {
        var pass = $("#pass").val();
         var username = $("#user").val();
            $.ajax({type:"POST",url:"login_request.php",data:{password:pass, username:username},
                    });
       });
    });
       </script>

    <h4> Please Login </h4>
    <form name="postcontent" >


        <input id="user" class="name" type="text" placeholder="Enter Username"/>
        <input id = "pass" class="pw" type="password" placeholder="Enter Password"/>
        <ul>
            <li><a href="#">Forgot your password?</a></li>
            <li><a href="#">Please Register Here</a></li>
        </ul>
         <input name="postsubmit" type="button" id="postsubmit" value="Sing Up"/>

     </form>

    login_request.php

    <?php
    $db = mysqli_connect('localhost','root','','yourdatabasename');
    echo $myusername = mysqli_real_escape_string($db,$_POST['username']);
     echo $mypassword = mysqli_real_escape_string($db,$_POST['password']);

    $sql = "SELECT username, pass FROM reg WHERE username = '$myusername' AND pass = '$mypassword'";
    $result = mysqli_query($db, $sql);
    $count = mysqli_num_rows($result);
    if($count == 1){
        $_SESSION['user'] = $myusername;
        header("location:index.php");
    } else {
        header("location:login.php");
    }

change your table name and datbase name according to yours.

Also add preventDefault() to restrict page refreshing

Answer 2

My friend I think your problem is in your jQuery/AJAX: put it on the bottom of the </body> tag or put it inside $(document).ready(function{});