Question

我有一个带有两个按钮的表单。我使用name数据中元素的POST属性检查在服务器端单击了哪一个，并相应地执行操作：

<input id="reply" name="reply" type="submit" value="{%trans "REPLY"%}">
<input id="delete" name="delete" type="submit" value="{%trans "DELETE"%}">

我正在尝试使用JQuery向DELETE按钮的click事件添加一个确认框（使用Boxy插件）。这是代码：

$(document).ready(function()  {
    $("#delete").click(function(e){
            Boxy.ask('Delete?', {'1':'YES', '2':'NO'}, function(val){
                if (val=='1') $("#form").submit();
            });
        return false;
    });     
});

当然，此代码会导致提交的表单中DELETE数据中缺少POST按钮的名称。有没有办法将这些数据添加到POST数据或更好的方式来实现我的目标？

Answer 1

您可以使用命名空间事件，在确认时取消绑定，然后重新触发：

$(document).ready(function() {

  var $delete = $("#delete");

  $delete.bind("click.guard", function() {
    Boxy.ask("Delete?", {"1": "YES", "2": "NO"}, function(val) {
      if (val == "1") {
        $delete.unbind("click.guard").click();
      }
    });
    return false;  
  });

});

Answer 2

有两种方法可以做到这一点。

如果按钮名称可以是GET而不是POST数据，则在Boxy回调中将其附加到表单的操作作为查询参数。
在表单中有一个隐藏字段，然后在Boxy回调中将该字段的值设置为按钮名称（或用于将命令传递到服务器的任何内容）。我不能扯掉一个jQuery示例（我自己更多的是一个Prototype人），但它应该是相当简单的。如果您正在进行优雅降级（允许在没有JavaScript的情况下提交表单），遗憾的是，这意味着您需要检查服务器上的隐藏字段（已启用JavaScript）以及按钮名称（它不是）侧。
使用#serialize抓取表单数据，将按钮字段附加到其中，然后通过jQuery.post提交结果。这与提交表单不完全相同，因为它不会用结果替换页面;你想在post回调中处理它。

Answer 3

最简单的方法是在单独的表单中定义删除按钮。

jquery - 以编程方式提交带有多个按钮的表单

3 个答案: