Notorious Notorious - 4 years ago 94
jQuery Question

Ajax Request not processing POST Variables

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download