Log in with a POST form that runs JavaScript and AJAX validation in a PHP file. Problems storing data in PHP

Question

Brief

I am now stuck in the AJAX part, since now I know how to extract data from the AJAX part and put into PHP variables so that I can access it and use it later. It also does not redirect me to another page (" Map.php").

I tried to search for answers on the Internet, but to no avail. Can someone with experience please help. Also, I'm not sure if my method of action is correct, please let me know where I made a mistake.

More details

I want to do " Login.php ", which will use the form to send email and password from the user. The form will have a “Login” button, which will run javascript for verification.

After checking, I will use AJAX to call another php file named " Auth.php ", which will establish a connection to the MySQL database, this user will check the user to search.

Then, "Auth.php" will return the json data for the user details that I intend to use on the "Login.php" page, and to start the session using the $ _ SESSION [] php variable. I also want the page to redirect the user to another page (" Map.php ") upon successful login.

The following are parts of my codes in " Login.php" and " Auth.php".

login.php

<form name="myForm" action="Map.php" method="post" onsubmit="return validateForm()">
    <fieldset>
        <div class="form-group">
            <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus value="<?php echo isset($_POST["email"])? $_POST["email"]: ""; ?>">
        </div>
        <div class="form-group">
            <input class="form-control" placeholder="Password" name="password" type="password" value="<?php echo isset($_POST["password"])? $_POST["password"]: ""; ?>">
        </div>
        <input type="submit" value="Login" class="btn btn-lg btn-success btn-block"/>
    </fieldset>
</form>

<script>
function validateForm() {
    //event.preventDefault();
    var email = document.forms["myForm"]["email"].value;
    var password = document.forms["myForm"]["password"].value;
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (email == null || email == "") {
        alert("Email must be filled.");
        return false;
    }

    if (password == null || password == "") {
        alert("Password must be filled.");
        return false;
    }

    if(re.test(email)) {
        var data = {
            "email": email,
            "password": password
        };
        data = $(this).serialize() + "&" + $.param(data);
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "auth.php", 
            data: data,
            success: function(data) {
                alert("You have successfully logged in!");
                // TODO store user details in session
                return true; // return true to form, so will proceed to "Map.php"
            }
        });
        return false;
    }
    else {
        alert("You have entered an invalid email address!");
        return false;
    }
    return false;
}
</script>

auth.php

$connection = mysqli_connect("localhost", "root", "", "bluesky");

// Test if connection succeeded
if(mysqli_connect_errno()) {
    die("Database connection failed: " . mysqli_connect_error() . " (" . mysqli_connect_errno() . ") " . 
    "<br>Please retry your last action. Please retry your last action. " . 
    "<br>If problem persist, please follow strictly to the instruction manual and restart the system.");
}

$valid=true;

if (isset($_GET['email']) && isset($_GET['password'])) {
    $email = addslashes($_GET['email']);
    $password = addslashes($_GET['password']);
} else {
    $valid = false;
    $arr=array('success'=>0,'message'=>"No username or password!");
    echo json_encode($arr);
}

if($valid == true){
    $query = "SELECT * FROM user WHERE email='$email' and password='$password'";
    $result = mysqli_query($connection, $query);
    if(mysqli_num_rows($result) == 1){
        $row = mysqli_fetch_assoc($result);
        $arr=array('success'=>1,'type'=>$row['type'],'user_id'=>$row['id'],'email'=>$row['email'],'name'=>$row['name'],'phone'=>$row['phone'],'notification'=>$row['notification']);
        echo json_encode($arr);
    }else{
        $arr=array('success'=>0,'message'=>"Login failed");
        echo json_encode($arr);
    }
}

// close the connection that was established with MySQL for the SQL Query
mysqli_close($connection);

Answer 1

Your ajax call should look like this:

data = $(this).serialize() + "&" + $.param(data)
$.post('auth.php', data, function(response){
  console.log(response);
});

post, , . jQuery.