Ajax Request not processing POST Variables

Question

I have read every post and have tried everything I can for the last few hours - so I have turned to the community for help!

I have a BMI calculator, which works fine. But I am trying to process the form through AJAX, now my ajax request works fine and I am recieving a response, but it does not contain any of my POST data.

Also let me mention that I am working with WordPress.

Here is my AJAX:

jQuery(document).ready(function($) {

    /*--------------------------------------------------------------
     # BMI Calculator Ajax Call
     --------------------------------------------------------------*/
    $('form#bmi-calculator').on( 'submit', function(e) {

        // ajax request
        $.ajax({
            url : ajax_object.ajax_url,
            type : 'POST',
            data : {
                'action' : 'fitnessgym_bmi_calculator',
            },
            success : function( response ) {
                $('.bmi-results').append( response );
                console.log( response );
            },
            alert : function( error ) {
                alert( 'error' )
            }

        });
        e.preventDefault();
    });

});

And here is my callback function:

/*-------------------------------------------------------------------
  Process the BMI Calculator
--------------------------------------------------------------------*/
add_action( 'wp_ajax_fitnessgym_bmi_calculator', 'fitnessgym_bmi_calculator' );
add_action( 'wp_ajax_nopriv_fitnessgym_bmi_calculator', 'fitnessgym_bmi_calculator' );


function fitnessgym_bmi_calculator() {

    // Sanitize post variables.
    $allowed_html = array();
    $weight = trim(sanitize_text_field(wp_kses($_POST['bmi_weight'], $allowed_html)));
    $height = trim(sanitize_text_field(wp_kses($_POST['bmi_height'], $allowed_html)));
    $age = trim(sanitize_text_field(wp_kses($_POST['bmi_age'], $allowed_html)));

    // Do the Calculation.
    $equation = $weight / $height;

    echo 'Weight is: ' . $weight . '<br>';
    echo 'Height is: ' . $height . '<br>';


    // If BMI is Healthy or Not.
    if ($equation < 18.5) {
        $health = esc_html__('Underweight', 'fitnessgym');
    } elseif ($equation > 18.5 && $equation < 24.9) {
        $health = esc_html__('Healthy', 'fitnessgym');
    } elseif ($equation > 25 && $equation < 29.9) {
        $health = esc_html__('Overweight', 'fitnessgym');
    } elseif ($equation > 30) {
        $health = esc_html__('Obese', 'fitnessgym');
    }

    $bmi_response = 'Your BMI is:' . number_format(esc_html($equation), 1) . '<br>Your health is: ' . $health;

    echo $bmi_response;

    wp_die();

}

Basically, when I submit the form what returns is:

Weight is: 
Height is: 
Your BMI is:
Your health is: Underweight

So without any of the POST information. Also let me mention that I have tried the POST variables without any sanitizing (encase anyone recommends that) :)

I can not figure out for the life of me, why this will not display. Any help is appreciated, thank-you.

Answer 1

You're not sending the data you are expecting on the backend.

Look again at your ajax call

$.ajax({
    ...
    data : {
        'action': 'fitnessgym_bmi_calculator',
    },
    ...
});

Add the data you are expecting to get is

{
    'action': 'fitnessgym_bmi_calculator',
    'bmi_weight': 0,
    'bmi_height': 0.
    'bmi_age': 0
}

Add those missing key-value pairs to data and everything should work.