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

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

<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())，它始终提交表单，无论我是否尝试

> return false;
> event.stopPropogation();要么
> event.preventDefault();

因为所有这些都是形式事件。

>我应该将$ .post()附加到form.submit()事件，如果是，请告诉用户点击哪个输入，或
>我应该将我的$ .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!?
});

解决方法

根据emmett的回答，我对此的理想解决办法就是用JavaScript本身来杀死表单的提交，就像这样：

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

这完全奏效

为了完整，我原来的一些JS代码需要一点爱。例如，我添加到serialize函数的方式似乎不起作用。这样做：

$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)
    });
});

原文地址：https://www.jb51.cc/jquery/183077.html