Jquery Ajax Form Submit To Php Returns Empty Response

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 accessi

Solution 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.

Solution 2:

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();
        }
     }
 });

Solution 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

<?phpecho$_POST['Parameter1'];
?>

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

Solution 4:

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();
                }
            }
        });

    });
});