使用两个提交按钮提交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>

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

---

我不明白

returnfalse

和

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

尝试将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>

函数imageClicked（img）{
警报（img.className）；
文件。表格[“投票表格”]。提交（）；
}

您还可以试用插件中的jquery，它是通过ajax提交表单的各种好工具

---

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

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

---

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

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

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

---

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

---

将被发布。

您可以单击图像触发表单提交。这将与preventDefault（）一起使用

---

正如我在最初的问题中所说，我可以做到这一点，但我仍然需要知道用户在这个函数中单击了什么图像输入。不幸的是，event.target==表单。正如我在问题中所说的，我已经按照您在第二部分中的建议做了，但是我无法访问用户单击的输入。此外，我不想切换到链接图像——虽然这可能适用于Ajax，但我仍然希望我的表单能够为不使用Javascript的用户工作，就像它目前所做的那样（也不会适用于普通图像）。虽然我不相信这是一个优雅的解决方案，但它确实让我找到了一个可行的解决方案，即添加：$（“.vote_form”）.submit（function（）{return false；}）；（我当然不想在表单中添加“onsubmit='return false；”，因为我想让表单在没有Ajax的情况下工作。）为此我非常感谢。大大缩短了我现有的尝试！为什么不使用

$this.attr（“name”）避免硬编码
”&submit=“
”

？@bngtlrs我猜是因为这是一个完全不必要的函数调用开销。@PaulSkinner是的，函数调用在这里是不必要的，但我会拒绝调用它，因为它通常不会被频繁调用。我打赌，重用性值得忽略可能过早的优化。我使用的是

.ajaxForm（）

，我的自动发送解决方案是

。ajaxForm（{}）。submit（）；

。将在自定义事件中不使用提交按钮发送ajax调用。

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

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