调用 form.submit() 时包含“成功”按钮

Question

我正在开发类似设备的产品的 Web GUI。

我有一个工作正常的 HTML 表单：它显示带有复选框的列表，用户检查其中的一些并单击提交表单的“删除”按钮。服务器获取 POST，删除项目并刷新页面。一切都好。

需要添加“您确定吗？”确认表格。如果我添加一个呼叫

 confirm("are you sure?");

作为 FORM 标记中的 onsubmit 方法，或提交按钮标记中的 onclick，它工作正常，但使用了丑陋的浏览器原生确认对话框。

在产品的其他地方，我们有一个不错的自定义 CSS 样式的确认对话框，我想使用它，但它的工作原理是这样的：在适当的地方，您调用

myConfirm("Confirm", "Are you sure", "Yes", "No", confirmCallback);

这会建立一个点击掩码，自定义一个对话框，居中并显示它，然后返回 FALSE 并且表单不提交。

稍后当用户决定时，如果他们按下“是”，它会调用 confirmCallback 函数。另一方面，基于 Ajax 的产品页面收集信息，创建一个 postBody 并使用 Prototype 的 Ajax 对象发布它，一切都很好。 （如果“否”，则删除对话框和点击掩码，然后继续。）

在这个更简单的页面上，使用纯 HTML 表单，我有一个如下所示的 confirmCallback 函数：

var confirmCallback = function() {
    document.myForm.submit();
}

它触发 OK，但是当提交表单时，删除按钮已经被点击，并且自定义确认返回的 false 被抑制提交。相反，这被认为是新提交，并且实际上并未单击删除按钮，因此根据 W3.org 的 HTML 4 标准第 17.13.3 节，它不被视为“成功”。服务器获取数据，没有删除按钮，说“我得到了，但我不知道你想让我用它做什么”，除了提供下一页之外什么都不做。

如果您读到这里，谢谢，这是我的实际问题。我如何才能在我的 confirmCallback javascript 函数中以跨浏览器的方式触发删除按钮、变为“成功”并与其余数据一起提交？

Answer 1

听起来您需要一个隐藏字段来伪装成按下的按钮，并且每个按钮都不需要名称，而是需要一个 onclick 事件来操作隐藏字段的值。

如果按钮的名称都不同，您可能需要使用 DOM 方法来添加隐藏字段，因为我认为您无法在所有浏览器中将字段添加到 DOM 后更改名称.

如果您需要此解决方案在没有 JS 的情况下仍然可以工作，那么您可能需要多玩一些 JS 逻辑（对初始 DOM 树进行更多修改）或修改服务器代码。您甚至可以将“您确定”行为放入响应中...

Answer 2

假设删除按钮是该表单的提交按钮，那么可能最简单的解决方案是给表单一个 id

<form id="submitForm"...

然后在您的确认调用中提交表单

document.getElementById("submitForm").submit()

我认为这可以满足您的要求，但您似乎已经非常熟悉该解决方案，所以如果您要问其他问题，请告诉我。

Answer 3

在您的回调中，删除按钮的 onclick 处理程序（导致确认），然后触发对按钮的单击。这将导致按钮单击以提交表单，并导致按钮导致提交连同表单数据一起回发。

var confirmCallback = function() {
    $('submitButton').stopObserving('click');
    $('submitButton').click();
}