Question

我正在处理一个小的PHP脚本，在管理面板中，我添加了一个页面来管理评论。以下是用于评论的html标记：

<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>

对于每条评论，我都会使用以下jquery代码将此信息发布到文件comment.php：

<script type="text/javascript">
    $(document).ready(function(){
        $("#form").submit(function(){
            $.get("response.php", $(this).serialize(), function(a){ 
                $("#info").html(a)
            });
            return false
        })
    });
</script>

我的问题是我无法使用此代码choice获取$_REQUEST['choice']值，因为两个<button>具有相同的名称，这与表单相同。我该如何解决这个问题？

Answer 1

你的代码有些错误：

1）您忘了放置JS正在调用的id属性

<form name="form" action="">

将其更改为：

<form name="form" action="" id="form">

由于名称相同，请改用.click()事件。

完整代码：

<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>

在你的PHP上：

if(isset($_POST['choice'])) {
    $action = $_POST['choice'];
    $data = $_POST;
    // its inside $_POST['id'];
    echo json_encode($data);
    exit;
}

Sample Output

Answer 2

您可以将ajax请求绑定到button.click()而不是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
    })
});

Jquery和具有相同名称问题的表单

2 个答案: