提交带有两个提交按钮的 jQuery ajax 表单 [英] Submitting a jQuery ajax form with two submit buttons

问题描述

我有一个看起来像这样的表单:

<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"/></表单>

当我绑定到表单的提交 ($("vote_form").submit()) 时，我似乎无法访问用户单击的图像.所以我试图绑定到点击图像本身 ($(".vote_down, .vote_up").click())，它总是提交表单，无论我是否尝试

• 返回假；
• 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() + {'提交':$(this).attr("value")}, 函数(数据){//对数据做一些事情});返回假；//<--- 这不会阻止表单提交；是什么！?});

解决方案

根据 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) {//对响应(数据)做一些事情});});

I have a form that looks like this:

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

When I bind to the form's submit ($("vote_form").submit()), I don't seem to have access to which image the user clicked on. So I'm trying to bind to clicking on the image itself ($(".vote_down, .vote_up").click()), which always submits the form, regardless of whether I try

• return false;
• event.stopPropogation(); or
• event.preventDefault();

because all of those are form events.

1. Should I attach my $.post() to the form.submit() event, and if so, how do I tell which input the user clicked on, or

2. Should I attach my $.post() to the image click, and if so, how do I prevent the form from submitting also.

Here is what my jQuery code looks like now:

$(".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!?
});

解决方案

Based on Emmett's answer, my ideal fix for this was just to kill the form's submit with Javascript itself, like this:

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

And that totally worked.

For completeness, some of my JS code in the original post need a little love. For example, the way I was adding to the serialize function didn't seem to work. This did:

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

Here's my entire jQuery code:

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

这篇关于提交带有两个提交按钮的 jQuery ajax 表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！