使用两个提交按钮提交jQuery ajax表单

Question

我有一个看起来像这样的表格：

<form action="/vote/" method="post" class="vote_form">
    <input type="hidden" name="question_id" value="10" />
    <input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" />
    <input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" />
</form>

当我绑定到表单的Submit（$("vote_form").submit()）时，似乎无法访问用户单击的图像。因此，我试图绑定到单击图像本身（$(".vote_down, .vote_up").click()），该图像总是提交表单，无论我是否尝试

• 返回false；
• event.stopPropogation（）; 要么
• event.preventDefault（）;

因为所有这些都是表单事件。

1. 我应该将$ .post（）附加到form.submit（）事件上吗，如果是，如何确定用户单击了哪个输入，或者

2. 我是否应该将$ .post（）附加到图像单击上，如果是，如何防止表单也提交。

这是我的jQuery代码现在的样子：

$(".vote_up, .vote_down").click(function (event) {
    $form = $(this).parent("form");
    $.post($form.attr("action"), $form.find("input").serialize() + {
        'submit': $(this).attr("value")
    }, function (data) {
        // do something with data
    });
    return false; // <--- This doesn't prevent form from submitting; what does!?
});

Answer 1

根据Emmett的回答，我的理想解决方案是使用Javascript本身杀死表单的提交，如下所示：

$(".vote_form").submit(function() { return false; });

那完全可行。

为了完整起见，我在原始帖子中的一些JS代码需要一点爱。例如，我添加到序列化函数的方法似乎不起作用。这样做：

    $form.serialize() + "&submit="+ $(this).attr("value")

这是我的整个jQuery代码：

$(".vote_form").submit(function() { return false; });
$(".vote_up, .vote_down").click(function(event) {
    $form = $(this).parent("form");
    $.post($form.attr("action"), $form.serialize() + "&submit="+ $(this).attr("value"), function(data) {
        // do something with response (data)
    });
});