$.post with serialize doesn't send post variables and values - php

Question

I want to post data with jquery to process.php, and return everything what happens in the process.php file.
I already managed to load the file with ajax. if I type
echo "Hello world!";
it does return Hello world! but it does not return the echoes where I use $_POST.
The form
<form class="calc" method="POST" action="process.php">
<input id="calc-average" type="text" name="calc-average" placeholder="Goal"/>
<input id="calc-weight" type="text" name="calc-weight" placeholder="Weight"/>
<input id="calc-calculate" type="hidden" name="calc-calculate" value="1" />
<input type="submit" class="btn btn-primary calc-submit" value="Calculate">
</form>
The script
$(".calc").submit(function(event) {
event.preventDefault();
$.post( 'process.php', $(".calc").serialize(),
function( data ) {
$(".result").append(data);
}
);
});
Process.php
if(isset($_POST["calc-calculate"])&&isset($_POST["calc-weight"])&&isset($_POST["calc-average"])){
if(!$_POST["calc-calculate"]==""&&!$_POST["calc-weight"]==""&&!$_POST["calc-average"]==""){
if($_POST["calc-calculate"]==$subjectid){
$a = $_POST["calc-weight"];
$y = $_POST["calc-average"];
$q = $weights;
$z = $average;
$tobe = (-($a*$y+$q*$y-$q*$z)/$a)*-1;
if($tobe>10 or $tobe<0){
echo " | Not possible yet";
}else{
echo " | The grade you need is: " . round($tobe,1);
}
}
}
}
echo "Hello wordl!";
If I remove the if statements it returns that they are unidentified.
So does anyone know how I can get this to work?
Thanks!

Answer 1

hi can you please try this in your jquery code
$(".calc").submit(function(event) {
event.preventDefault();
$.post( 'process.php', $(".calc :input").serialize(),
function( data ) {
$(".result").append(data);
}
);
});

Answer 2

This code is working fine for me.
try adding return false after post request.
$(".calc").submit(function(event) {
event.preventDefault();
$.post( 'process.php', $(".calc").serialize(),
function( data ) {
$(".result").append(data);
}
);
return false;
});

Answer 3

I already had the same problem. My code had a duplicate "id" on the page. That was my issue.
Please, make sure you have an exclusive id or class "calc" in the form to "serialize" command call the correct element.