Allow a login form to process php script on same page without refreshing the page

Question

EDIT
Thanks to, Wes CI now have this AJAX Code:

   <script type="text/javascript"> 
$(document).ready(function(){
    $("form[name^='login']").submit(function(event) {
        event.preventDefault();

        var dataToSend = 'username='+$("input[name^='username']").val()+'&password='+$("input[name^='password']").val();

        $.ajax({
            type: "POST",
            url: "index.php",
            data: dataToSend,
            success: function(response){
                if(response == "REDIRECT")
                {
                    window.location = "business_profiles/myReviews.php";
                else
                {
                    $("#my_error_div").html(response);
                }
            }
        });
    });
});
</script>

But now instead of showing the error messages when you for instance type your password box. All I receive is an alert box saying "Success" regardless of what the forms input is.

Ok, I have tried and tried to figure this out on my own. As well as reached out to fellow coders and of course searched stackoverflow for answers. None really seemed to match my situation.

I have a simple login form like so:

<form name="login" action="index.php" method="post">

        <ul>

            <li>
                <input type="text" name="username" autocomplete="off" placeholder="Username" autofocus="true"></li>

            <li>
                <input type="password" name="password" autocomplete="off" placeholder="Password"></li>
            <li>

                <input type="submit" name="submit" value="Login"> <a href="register.php" id="button">Register</a> <a href="forgot.php" id="button">Forgot Password</a> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" id="button">Close</a>

            </li>
        </ul>
    </form>

This form submits to the same page that it is on. (the php script is right above the login form.) and that is as follows:

    <?php

//If the user has submitted the form
if($_POST['username']){
    //protect the posted value then store them to variables
    $username = protect($_POST['username']);
    $password = protect($_POST['password']);

    //Check if the username or password boxes were not filled in
    if(!$username || !$password){
        //if not display an error message
        echo "<center>You need to fill in a <b>Username</b> and a <b>Password</b>!</center>";
    }else{
        //if the were continue checking

        //select all rows from the table where the username matches the one entered by the user
        $res = mysql_query("SELECT * FROM `users` WHERE `username` = '".$username."'");
        $num = mysql_num_rows($res);

        //check if there was not a match
        if($num == 0){
            //if not display an error message
            echo "<center>The <b>Username</b> you supplied does not exist!</center>";
        }else{
            //if there was a match continue checking

            //select all rows where the username and password match the ones submitted by the user
            $res = mysql_query("SELECT * FROM `users` WHERE `username` = '".$username."' AND `password` = '".$password."'");
            $num = mysql_num_rows($res);

            //check if there was not a match
            if($num == 0){
                //if not display error message
                echo "<center>The <b>Password</b> you supplied does not match the one for that username!</center>";
            }else{
                //if there was continue checking

                //split all fields fom the correct row into an associative array
                $row = mysql_fetch_assoc($res);

                //check to see if the user has not activated their account yet
                if($row['active'] != 1){
                    //if not display error message
                    echo "<center>You have not yet <b>Activated</b> your account!</center>";
                }else{
                    //if they have log them in

                    //set the login session storing there id - we use this to see if they are logged in or not
                    $_SESSION['uid'] = $row['id'];
                    //show message
                    echo "<center>You have successfully logged in!</center>";

                    //update the online field to 50 seconds into the future
                    $time = date('U')+50;
                    mysql_query("UPDATE `users` SET `online` = '".$time."' WHERE `id` = '".$_SESSION['uid']."'");

                    //redirect them to the usersonline page
                    echo 'REDIRECT';

                    exit;
                }
            }
        }
    }
}

?>

I am needing the form to process the script WITHOUT refreshing the page. My Login form is within a light box so in turn if there is an error like an invalid password when the page refreshes the light box hides again and you have to click Login again to find out what you did wrong. I just want the form to process the php script without refreshing the page so the light box never hides until the user has logged in successfully. Which then the user is redirected to their profile.

Answer 1

Using jQuery, you could post the data from the login form to the same page using the following AJAX function:

<script type="text/javascript"> 
$(document).ready(function(){
    $("form[name^='login']").submit(function(event) {
        event.preventDefault();

        var dataToSend = 'username='+$("input[name^='username']").val()+'&password='+$("input[name^='password']").val();

        $.ajax({
            type: "POST",
            url: "index.php",
            data: dataToSend,
            success: function(response){
                if(response == "REDIRECT")
                {
                    window.location = "business_profiles/myReviews.php";
                }
                else
                {
                    alert("Error: "+response);
                    $("#my_error_div").html(response);
                }
            }
        });
    });
});
</script>

Also, change your PHP to:

<?php

//If the user has submitted the form
if(isset($_REQUEST['username'])){
    //protect the posted value then store them to variables
    $username = protect($_POST['username']);
    $password = protect($_POST['password']);

    //Check if the username or password boxes were not filled in
    if(!$username || !$password){
        //if not display an error message
        echo "<center>You need to fill in a <b>Username</b> and a <b>Password</b>!</center>";
    }else{
        //if the were continue checking

        //select all rows from the table where the username matches the one entered by the user
        $res = mysql_query("SELECT * FROM `users` WHERE `username` = '".$username."'");
        $num = mysql_num_rows($res);

        //check if there was not a match
        if($num == 0){
            //if not display an error message
            echo "<center>The <b>Username</b> you supplied does not exist!</center>";
        }else{
            //if there was a match continue checking

            //select all rows where the username and password match the ones submitted by the user
            $res = mysql_query("SELECT * FROM `users` WHERE `username` = '".$username."' AND `password` = '".$password."'");
            $num = mysql_num_rows($res);

            //check if there was not a match
            if($num == 0){
                //if not display error message
                echo "<center>The <b>Password</b> you supplied does not match the one for that username!</center>";
            }else{
                //if there was continue checking

                //split all fields fom the correct row into an associative array
                $row = mysql_fetch_assoc($res);

                //check to see if the user has not activated their account yet
                if($row['active'] != 1){
                    //if not display error message
                    echo "<center>You have not yet <b>Activated</b> your account!</center>";
                }else{
                    //if they have log them in

                    //set the login session storing there id - we use this to see if they are logged in or not
                    $_SESSION['uid'] = $row['id'];


                    //update the online field to 50 seconds into the future
                    $time = date('U')+50;
                    mysql_query("UPDATE `users` SET `online` = '".$time."' WHERE `id` = '".$_SESSION['uid']."'");

                    //redirect them to the usersonline page
                    echo 'REDIRECT';
                }
            }
        }
    }

    exit;
}

?>

Answer 2

step1:Add a div to your login form.

step2: Validate the user controls and then load the page in the ajax call

step3:In the ajax success event append the page you want to show using .html()