issue with ajax login script

Question

I'm very new to ajax, and I'm trying to make a login script that doesn't require a page reload - it's working well except I attempt to set a session variable on the processing page, but no session variable is set.

My form:

<div class="form-bottom">
    <form role="form" class="login-form">
        <div class="form-group">
            <label class="sr-only" for="username">Username</label>
        <input type="text" name="username" placeholder="Username..." class="form-username form-control" id="username">
        </div>
        <div class="form-group">
        <label class="sr-only" for="password">Password</label>
        <input type="password" name="password" placeholder="Password..." class="form-password form-control" id="password">
        </div>
        <input type="submit" id="submit" class="btn" style="width:100%;background-color:lightblue;" value="Log In" id="login"/>
    </form>
        <? echo $_SESSION['Name']; ?>
</div>

My ajax:

<script type="text/javascript" >
      $(function() {
          $("#submit").click(function() {
          var username = $("#username").val();
          var password = $("#password").val();
          var dataString = 'username='+ username + '&password=' + password;

        if(username=='' || password=='')
        {
          $('.success').fadeOut(200).hide();
          $('.error').fadeOut(200).show();
        }
        else
        {
          $.ajax({
            type: "POST",
            url: "ajax/login.php",
            data: dataString,
            success: function(){
             $('.success').fadeIn(200).show();
             $('.error').fadeOut(200).hide();
             window.setTimeout(function () {
                location.href = "index.php";
            }, 3000);
            }
          });
        }
        return false;
        });
    });
    </script>

My php script:

 include('./static/config.php');

if (session_status() == PHP_SESSION_NONE) {
        session_start();
    }

if(isset($_POST)) {

    $username = mysqli_real_escape_string($con, $_POST['username']);
    $password = mysqli_real_escape_string($con, $_POST['password']);

    $sql = "SELECT Name FROM techs WHERE Username='$username' AND Password='$password'";
    $result = mysqli_query($con, $sql);
    $exists = mysqli_num_rows($result);

    if($exists == 1) {
    $row = mysqli_fetch_assoc($result);
        $_SESSION['Name'] = $row['Name'];
    }

}

Answer 1

I was able to get it working the way I wanted it to.

Form:

<div id="box">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 form-box">
                    <div class="form-top">
                        <div class="form-top-left">
                            <h3>Log-in</h3>
                            <span id="error" class="error"></span>
                        </div>
                        <div class="form-top-right">
                            <i class="fa fa-key"></i>
                        </div>
                    </div>
                    <div id="box" class="form-bottom">
                        <form class="login-form" action="" method="post">
                            <div class="form-group">
                                <label class="sr-only" for="username">Username</label>
                                <input type="text" name="username" placeholder="Username..." class="form-username form-control" id="username">
                            </div>
                            <div class="form-group">
                                <label class="sr-only" for="password">Password</label>
                                <input type="password" name="password" placeholder="Password..." class="form-password form-control" id="password">
                            </div>
                            <input type="submit" id="login" class="btn" style="width:100%;background-color:lightblue;" value="Log In" id="login"/>
                        </form>
                    </div>
                </div>
            </div>
        </div>

AJAX Code:

<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.shake.js"></script>
        <script>
            $(document).ready(function() {

            $('#login').click(function()
            {
            var username=$("#username").val();
            var password=$("#password").val();
            var dataString = 'username='+username+'&password='+password;
            if($.trim(username).length>0 && $.trim(password).length>0)
            {


            $.ajax({
            type: "POST",
            url: "ajax/login.php",
            data: dataString,
            cache: false,
            beforeSend: function(){ $("#login").val('Connecting...');},
            success: function(data){
            if(data)
            {
            window.setTimeout(function () {
                location.href = "index.php";
            }, 3000);
            }
            else
            {
             $('#box').shake();
             $("#login").val('Login')
             $("#error").html("<span style='color:#cc0000'>Error:</span> Invalid username and password. ");
            }
            }
            });

            }
            return false;
            });


            });
        </script>

PHP (ajax/login.php):

<?php
include("../static/config.php");
session_start();
if(isSet($_POST['username']) && isSet($_POST['password']))
{
// username and password sent from Form
$username=mysqli_real_escape_string($con,$_POST['username']); 
$password=mysqli_real_escape_string($con,$_POST['password']); 

$result=mysqli_query($con,"SELECT Name FROM techs WHERE Username='$username' and Password='$password'");
$count=mysqli_num_rows($result);

$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
// If result matched $myusername and $mypassword, table row must be 1 row
if($count==1)
{
$_SESSION['Name']=$row['Name'];
echo $row['Name'];
}

}
?>

Answer 2

Since you've stated you're very new to Ajax, you start off pretty well. There are however a couple of things to know how this works.

You want to avoid a page refresh, yet you don't print out any responses because you're not returning anything in the ajax request. You instead set a session variable which will show up at the next page request (so a refresh)

$.ajax({ 
    type: 'POST', 
    url: 'ajax/login.php', 
    data: { username:  $("#username").val(), password:  $("#password").val() }, 
    success: function (data) { 
        $('.form-bottom').html(data); // here we replace the form with output of the ajax/login.php response.
    }
});

And for the PHP side of things:

    $sql = "SELECT Name FROM techs WHERE Username='$username' AND Password='$password'";
    if(($result = mysqli_query($con, $sql)) != false){ // always verify if your query ran successfully.
        if(mysqli_num_rows($result)){ // or compare with == 1, but assuming a username is unique it can only be 1 so it equals to true.
            echo mysqli_fetch_assoc($result)['name']; // index, columns, etc should always be lower cased to avoid confusion.
            // Obviously you can store it in a session
            // But for now just output the data so we can use it as our response.
            // json is very usefull with sending large amounts of data.
        }
    }

The idea of Ajax is that you can request an update, but you need to update your page with javascript manually in order to make it work.

Answer 3

I think you forget to start the session.So start the session at the top of your script. Hope it will help.

 session_start();

    include('./static/config.php');

    if(isset($_POST)) {


        $username = mysqli_real_escape_string($con, $_POST['username']);
        $password = mysqli_real_escape_string($con, $_POST['password']);

        $sql = "SELECT Name FROM techs WHERE Username='$username' AND Password='$password'";
        $result = mysqli_query($con, $sql);
        $exists = mysqli_num_rows($result);

        if($exists == 1) {
        $row = mysqli_fetch_assoc($result);
            $_SESSION['Name'] = $row['Name'];
        }

    }

Answer 4

3 things you could try:

1. On the page where you are trying to set the session variable you would have to use proper php opening tags like <?php
2. Second thing is that you would have to put a value in your session like $_SESSION['hello'] = 'hello';
3. Third thing, on every page where you handle your session you would have to call <?php session_start(); ?> for it to work.

Goodluck!