Jquery and form with same name issue - php

Question

Well i'm working on a small php script and in the admin panel i've added a page to manage comments. Following is the html markup for comment:
<form name="form" action="">
<tr>
<td>COMMENT ID</td><td><button value="0" name="choice">Delete</button><button value="1" name="choice">Accept</button></td>
</form>
For every comment i'm posting this info to a file comment.php using the following jquery code:
<script type="text/javascript">
$(document).ready(function(){
$("#form").submit(function(){
$.get("response.php", $(this).serialize(), function(a){
$("#info").html(a)
});
return false
})
});
</script>
My issue is i can't get the choice Value using this code $_REQUEST['choice'] because both <button>s have the same name and this is the same thing for forms. How can i fix this ?

Answer 1

The are some mistakes on your code:
1) You forgot to put the id attribute that your JS is calling
<form name="form" action="">
Change it to this:
<form name="form" action="" id="form">
Since it has the same name, use the .click() event instead.
Complete Code:
<form name="form" action="" id="form">
<table>
<tr>
<td>COMMENT ID</td>
<td>
<button value="0" name="choice">Delete</button>
<button value="1" name="choice">Accept</button>
<input type="hidden" name="id" value="100">
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button[name='choice']").click(function(e){
var form_data = {};
form_data.choice = $(this).val();
form_data.id = $(this).siblings('input[name="id"]').val();
e.preventDefault(); // stops the normal submission
$.post("index.php", form_data, function(a){
console.log(a); // check the values on browser console
});
});
});
</script>
On your PHP:
if(isset($_POST['choice'])) {
$action = $_POST['choice'];
$data = $_POST;
// its inside $_POST['id'];
echo json_encode($data);
exit;
}
Sample Output

Answer 2

You can do this by binding the ajax request to the button.click() instead of form.submit()
$(function(){ // $(document).ready() shorthand
$("button[name=choice]").click(function(){
var data = 'choice='+ $(this).val() + '&' + $(this).closest('form').serialize();
$.get("response.php", data, function(a){
$("#info").html(a)
});
return false
})
});