提交带有两个提交按钮的 jQuery ajax 表单

Submitting a jQuery ajax form with two submit buttons

提问by worksology

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

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

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

• 返回假；
• event.stopPropogation(); 或者
• 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.

1. 我应该将我的 $.post() 附加到 form.submit() 事件，如果是这样，我如何知道用户点击了哪个输入，或者

2. 我应该将我的 $.post() 附加到图像点击，如果是，我该如何防止表单也提交。

Here is what my jQuery code looks like now:

这是我的 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!?
});

回答by worksology

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

根据 Emmett 的回答，我对此的理想解决方法是使用 Javascript 本身终止表单的提交，如下所示：

$(".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:

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

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

Here's my entire jQuery code:

这是我的整个 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)
    });
});

回答by Jim C

Another solution is to use a hidden field, and have the onclick event update its value. This gives you access from javascript, as well as on the server where the hidden field will get posted.

另一种解决方案是使用隐藏字段，并让 onclick 事件更新其值。这使您可以从 javascript 以及在将发布隐藏字段的服务器上进行访问。

回答by Jo?o Santos

You can trigger the form submit on the click of the images. This will work with the preventDefault().

您可以通过单击图像触发表单提交。这将与 preventDefault() 一起使用。

var vote;
$(".vote_up, .vote_down").click(function(event) {
    vote = $(this).attr("class");
    $(".vote_form").trigger("submit");
});

$(".vote_form").submit(function(event) { 
    $form = $(this);
    $.post($form.attr("action"), $form.serialize() + "&submit="+ vote, function(data) {
        // do something with response (data)
    });     
    event.preventDefault();
});

回答by karim79

I don't get how return falseand preventDefaultfailed to do their job. Maybe try replacing the image buttons with linked images:

我不明白他们是怎么做的return false，也preventDefault没有做好他们的工作。也许尝试用链接图像替换图像按钮：

<a href="#" class="vote_down"><img src="vote_down.png"/></a>

$('#vote_form > a').click(function(e) {
    e.preventDefault();

    //one way to know which image was clicked
    alert($(this).attr('class'));

    $.post(...
});

You can always ensure that a form does not submit by binding to the submit event, e.g.:

您始终可以通过绑定到 submit 事件来确保表单不会提交，例如：

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

回答by Emmett

Try adding onsubmit="return false;" to your form, and then submitting your form with javascript:

尝试添加 onsubmit="return false;" 到您的表单，然后使用 javascript 提交表单：

<form action="/vote/" method="post" name="vote_form" class="vote_form" onsubmit="return false;">
    <input type="hidden" name="question_id" value="10" />
    <input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" onclick="imageClicked(this)"/>
    <input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" onclick="imageClicked(this)"/>
</form>

<script>
function imageClicked(img) {
    alert(img.className);
    document.forms["vote_form"].submit();
}
</script>

回答by PetersenDidIt

You can also try out the jquery From Plugin which as all sorts of nice tools for submitting forms via ajax.

您还可以尝试使用 jquery From Plugin，它是通过 ajax 提交表单的各种不错的工具。

http://malsup.com/jquery/form/

http://malsup.com/jquery/form/

回答by Andy Gaskell

Without resorting to the Form plugin (which you should use) you should be handling the submit event instead. The code would stay pretty close to the original:

如果不求助于 Form 插件（您应该使用它），您应该处理提交事件。代码将与原始代码非常接近：

$("form").submit(function()) {
  $.post($(this).attr("action"), $(this).serialize(), function(data) {
    // work with the response
  });
  return false;
});

回答by jvandemerwe

var form = jQuery('#myform');

var data = form.serialize();

// add the button to the form data
var btn = jQuery('button[name=mybuttonname]').attr('value');
data += '&yourpostname=' + btn;

var ajax = jQuery.ajax({
    url: url,
    type: 'POST',
    data: data,
    statusCode: {
        404: function () {
            alert("page not found");
        }
    }
});
... rest of your code ...