Jquery Ajax form submit to PHP returns empty response

Question

I'm trying to submit a form to PHP with Ajax so I don't have to reload the page. But when I click the Submit button, PHP post array is empty and I can't get any values when accessing values like: $google_recaptcha = $_POST['recaptcha'] ?? '';

Any suggestions?

$(document).ready(() => {
    $("#appointment-form").on('submit', e => {
        e.preventDefault();
        console.log('Event triggered!');

        const name = $("#name").val();
        const email = $("#email").val();
        const phone = $("#phone").val();
        const company = $("#company").val();
        const service = $("#service").val();
        const country = $("#country").val();
        const day = $("#day").val();
        const timing = $("#timing").val();
        const message = $("#message").val();
        const csrfToken = $('input[name="csrf_token"]').val();

        $.ajax({
            type: 'post',
            url: 'private/shared/appointment_process.php',
            data: {
                name: name,
                email: email,
                phone: phone,
                company: company,
                service: service,
                country: country,
                day: day,
                timing: timing,
                message: message,
                csrfToken: csrfToken,
                recaptcha: grecaptcha.getResponse()
            },
            success: (result) => {
                console.log('Got response back');
                console.log(result);
                if (result === "Success") {
                    $("#form-success").html('Message has been sent!');
                    $("#form-success").show();
                } else {
                    $("#form-error").html(result);
                    $("#form-error").show();
                }
            }
        });

    });
});

PHP Code

<?php

require_once('../initialize.php');

$google_recaptcha = $_POST['recaptcha']  ?? '';
$name = h($_POST['name']  ?? '');
...

Form code

<form action="" method="post" id="appointment-form" class="login-form sign-in-form" data-toggle="validator">
    <div class="text_box row">
        <div class="col-lg-6">
            <input type="text" name="name" id="name" placeholder="Your Name *">
        </div>
        <div class="col-lg-6">
            <input type="email" name="email" id="email" placeholder="Your Email">
        </div>
    </div>
    <div class="text_box row">
        <div class="col-lg-6">
            <input type="text" name="phone" id="phone" placeholder="Mobile Number *">
        </div>
        <div class="col-lg-6">
            <input type="text" name="company" id="company" placeholder="Company">
        </div>
    </div>

    <div class="text_box row col-13">
        <select name="service" id="service" class="selectpickers col-12 col-lg-6 col-md-6 col-sm-6" style="margin: 5px;">
            <option value="">Select Service</option>
            <?php for ($i = 0; $i < count($services); $i++) { ?>
                <option value="<?php echo $i; ?>"><?php echo $services[$i]; ?></option>
            <?php } ?>
        </select>
        <select name="country" id="country" class="selectpickers col-12 col-lg-6 col-md-6 col-sm-6">
            <option value="">Select Country</option>
            <?php for ($j = 0; $j < count($countries); $j++) { ?>
                <option value="<?php echo $j; ?>"><?php echo $countries[$j]; ?></option>
            <?php } ?>
        </select>
    </div>
    <div class="text_box row col-13">
        <select name="day" id="day" class="selectpickers col-12 col-lg-6 col-md-6 col-sm-6" style="margin: 5px;">
            <option value="">Select a day</option>
            <?php for ($k = 0; $k < count($days); $k++) { ?>
                <option value="<?php echo $k; ?>"><?php echo $days[$k]; ?></option>
            <?php } ?>
        </select>
        <div class="help-block with-errors text-danger mt-2"></div>

        <select name="timing" id="timing" class="selectpickers col-12 col-lg-6 col-md-6 col-sm-6">
            <option value="">Select a time</option>
            <?php for ($h = 0; $h < count($timings); $h++) { ?>
                <option value="<?php echo $h; ?>"><?php echo $timings[$h]; ?></option>
            <?php } ?>
        </select>
    </div>

    <div class="form-group text_box">
        <textarea name="message" id="message" placeholder="Description..."></textarea>
    </div>
    <?php echo csrf_token_tag(); ?>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <div class="g-recaptcha" data-sitekey="6Lf2c6gZAAAAABMI2STA9ciP9_kYr6dNV_uDeoD_"></div>
    <div class="d-flex justify-content-between align-items-center">
        <button type="submit" id="btn-submit" class="btn_three mt-4">Send Now</button>
    </div>
</form>

Answer 1

During a lengthy chat with the OP it was determined that they are using mod-rewrite to hide the .php extensions on each file.

This is happening due to removing the PHP extensions from the URL I guess with the url rewriting in the htaccess

Given that is the case the change in the AJAX call should be focused on the URL. Change this:

url: 'private/shared/appointment_process.php',

to this:

url: 'private/shared/appointment_process',

And your AJAX should work properly.

Answer 2

You need to use data: {recaptcha: grecaptcha.getResponse()} to POST it correctly.

Here you go:

$(document).ready(() => {
    $("#appointment-form").on('submit', e => {
        e.preventDefault();
        console.log('Event triggered!');

        var name = $("#name").val();
        var email = $("#email").val();
        var phone = $("#phone").val();
        var company = $("#company").val();
        var service = $("#service").val();
        var country = $("#country").val();
        var day = $("#day").val();
        var timing = $("#timing").val();
        var message = $("#message").val();
        var csrfToken = $('input[name="csrf_token"]').val();

        $.ajax({
            type: 'post',
            url: 'private/shared/appointment_process.php',
            data: {"name": name, "email": email, "phone": phone, "company": company, "service": service, "country": country, "day": day, "timing": timing, "message": message, "csrfToken": csrfToken, "recaptcha": grecaptcha.getResponse()},
            success: (result) => {
                console.log('Got response back');
                console.log(result);
                if (result === "Success") {
                    $("#form-success").html('Message has been sent!');
                    $("#form-success").show();
                } else {
                    $("#form-error").html(result);
                    $("#form-error").show();
                }
            }
        });

    });
});

Answer 3

You need to pass the data in a different way Like,

$.ajax({
        url: 'URL',
        type: 'POST',
        data: { Parameter1: "Value", Parameter2: "Value"} ,
        success: function (response) {
            alert(response.status);
        },
        error: function () {
            alert("error");
        }
    }); 

In Your PHP if you try the code

<?php
echo $_POST['Parameter1'];
?>

Will return the Value of the Parameter1 Send form the ajax request

Answer 4

Isn't the data field supposed to be formatted like this with type POST..

I thought query strings were only used with GET...

$.ajax({
    type: 'post',
    url: 'private/shared/appointment_process.php',
    data: {
       "name" : name,
       "email" : email,
       "phone" : phone,
       "company" : company
    },
    success: (result) => {
        console.log('Got response back');
        console.log(result);
        if (result === "Success") {
            $("#form-success").html('Message has been sent!');
            $("#form-success").show();
        } else {
            $("#form-error").html(result);
            $("#form-error").show();
        }
     }
 });