Access on $_POST variables fails on button - php

Question

I'm keen to know how to send and manage 2 values out of one php-form without reloading/refreshing. This is a simple up-down voting formular to vote with one click.
I've startet with the form:
echo "<form id='votingform' method='post'>";
echo "<button id='rateup' /><i class='fa fa-thumbs-o-up fa-2x'></i></button>";
echo "<button id='ratedown' /><i class='fa fa-thumbs-o-down fa-2x'></i></button>";
echo "<input type='hidden' value='".$id."' name='rateid' />";
echo "</form>";
Then I'm using some jquery to prevent formula-submit and add some visible response for testing purposes:
$(document).ready(function() {
var form = $('#votingform');
var submit = $('#rateup'); // submit button
var submit2 = $('#ratedown'); // submit button
// form submit event
form.on('submit', function(e) {
e.preventDefault(); // prevent default form submit
$.ajax({
url: '', // form action url
type: 'POST', // form submit method get/post
dataType: 'html', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function() {
alert.fadeOut();
submit.html('Sending....'); // change submit button text
},
success: function(data) {
alert.html(data).fadeIn(); // fade in response data
form.trigger('reset'); // reset form
submit.html('Send Email'); // reset submit button text
},
error: function(e) {
console.log(e)
}
});
});
});
form.on('submit2', function(e) {
e.preventDefault(); // prevent default form submit
$.ajax({
url: '', // form action url
type: 'POST', // form submit method get/post
dataType: 'html', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function() {
alert.fadeOut();
submit.html('Sending....'); // change submit button text
},
success: function(data) {
alert.html(data).fadeIn(); // fade in response data
form.trigger('reset'); // reset form
submit.html('Send Email'); // reset submit button text
},
error: function(e) {
console.log(e)
}
});
});
});
And added some action:
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) ){
$vote1 = $_POST['rateup'];
$vote2 = $_POST['ratedown'];
echo $vote1; echo $vote2;
// sql part goes here
}
return;
}
The $vote1 is ok, $vote2 is empty. Does anyone have a clue on this and can help me to solve this problem? Or maybe a smarter way to get this thing working? Thanks for your help in advance!

Answer 1

Button elements do not send their value - hence no POSTed value.
Change your elements to
<form id='rateform' action='' method='post'>
<input type='submit' name='submit' class='votecomment' value='up' />
<input type='submit' name='submit' class='votecomment' value='down' />
<input type="hidden" value="1" name="test" />
</form>

Answer 2

Try this :
$http_post = ('POST' == $_SERVER['REQUEST_METHOD']);
if($http_post)
{
echo $_POST['submit']; // no result
echo $_POST['test'];
}
If you click on up then $_POST['submit'] will echo 'up' and if you click on down then $_POST['submit'] will echo 'down'