Check if form has been submitted via ajax in php

Question

I have a login form which is validated using javascript and then sent to php file for further processing. Form is submitted via ajax.

Currently, i have an if statement in php file that checks whether form has been submitted, problem is this if statement never evaluates to true. Hence my php code inside my if statement never runs. When request is sent via ajax, .onload event gets invoked without if statement inside php file evaluating to true.

Question

Once the form is submitted to php file via ajax, how can i detect in php file that form has been submitted via javascript.

Here's my php code

<?php

    require 'DbConnection.php';

    // if form is submitted
    if(isset($_POST['login-btn'])) {
        $username = $_POST['username-field'];
        $password = $_POST['password-field'];
        echo '<script>alert(\'form submitted\')</script>';
        verifyLoginCredentials($username, $password);
    } else {
        echo '<script>alert(\'form not submitted\')</script>';
    }

    // verify admin login credentials
    function verifyLoginCredentials($username, $password) {
        global $dbConnect;
        $query = 'SELECT full_name, username, password FROM admins WHERE username = ?';
        $statement = $dbConnect->prepare($query);

        if($statement) {
            $statement->bind_param('s', $username);
            $statement->execute();
            $resultSet = $statement->get_result();

            // since there will be only one row returned at max, no need of a loop
            $row = $resultSet->fetch_assoc();

            if($row != null) {
                $adminFullName = $row['full_name'];
                $adminUsername = $row['username'];
                $adminPassword = $row['password'];

                // if username/password is correct start session and store
                // username, password, full name in the session
                if($username === $adminUsername && password_verify($password, $adminPassword)) {
                    session_start();
                    $_SESSION['current_admin_fullname'] = $adminFullName;
                    $_SESSION['current_admin_username'] = $adminUsername;
                    $_SESSION['current_admin_password'] = $adminPassword;
                }
                else { // if username/password combination is incorrect
                    echo 'Incorrect Username/Password Combination';
                }
            } else { // if username doesn't exists in the database
                echo 'Entered username isn\'t registered';
            }
        } else {
            echo 'Error while preparing sql query';
        }
    }

?>

and here's relevant javascript code

let loginForm = document.querySelector('.login-form');
let usernameField = document.getElementById('username-field');
let passwordField = document.getElementById('password-field');

// submit login form to server using ajax
function ajaxFormSubmit() {
    'use strict';
    let ajaxRequest = new XMLHttpRequest();
    let url = 'admin login.php';

    // login form submitted on server successfully
    ajaxRequest.onload = function () {
        if (ajaxRequest.readyState === 4 && ajaxRequest.status === 200) {
            console.log(ajaxRequest.responseText);
            displayInfoMessage(ajaxRequest.responseText, 'success');
        }
    };

    // error while login form submission on server
    ajaxRequest.onerror = function () {
        if (ajaxRequest.status !== 200) {
            console.log(ajaxRequest.responseText);
            displayInfoMessage(ajaxRequest.responseText, 'error');
        }
    };

    ajaxRequest.open('POST', url, true);
    ajaxRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    ajaxRequest.send(new FormData(loginForm));
}

function validateForm(e) {
    'use strict';

    // prevent form submission
    e.preventDefault();

    if (anyEmptyField()) {
        displayInfoMessage('Please fill all the empty fields', 'error');
        highLightEmptyFields();
        //return false;
        return;
    }

    // check if username is in right format
    if (!(regexTester(/^[A-Za-z0-9_]+$/g, usernameField.value))) {
        displayInfoMessage('Username not valid', 'error');
        highLightTextField(usernameField);
        //return false;
        return;
    }

    // check if username is atleast 3 characters long
    if (usernameField.value.length < 3) {
        displayInfoMessage('Username should contain atleast 3 characters', 'error');
        highLightTextField(usernameField);
        //return false;
        return;
    }

    // check if password is in right format
    if (!(regexTester(/^[A-Za-z0-9_]+$/g, passwordField.value))) {
        displayInfoMessage('Password not valid', 'error');
        highLightTextField(passwordField);
        //return false;
        return;
    }

    // check if password is atleast 6 characters long
    if (passwordField.value.length < 6) {
        displayInfoMessage('Password should contain atleast 6 characters', 'error');
        highLightTextField(passwordField);
        //return false;
        return;
    }

    //return true;
    // submit form information to server via ajax
    ajaxFormSubmit();
}

// add submit event listener on login form
loginForm.addEventListener('submit', validateForm);

Answer 1

There is no guaranteed way to know that the form was submitted via ajax.

Normally this is done via headers, in our case HTTP_X_REQUESTED_WITH which can be retrieved via the global $_SERVER variable.

Do note that headers can easily be spoofed.

You can check like so:

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
    // code here
}

---

Here's a few links to look at:

• https://paulund.co.uk/use-php-to-detect-an-ajax-request

• How to check if the request is an AJAX request with PHP