Question

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

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

需要添加“你确定吗？”确认表格。如果我添加了对

的调用

 confirm("are you sure?");

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

在产品的其他地方，我们有一个很好的自定义CSS风格的确认对话框我想使用，但它的工作原理如下：在适当的地方，你打电话给

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

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

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

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

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

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

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

Answer 1

在回调中，删除按钮的onclick处理程序（导致确认），然后触发按钮上的单击。这将导致按钮单击以提交表单并生成按钮，从而导致提交与表单数据一起回发。

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

Answer 2

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

<form id="submitForm"...

然后在确认电话中提交表格

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

我认为这会做你所要求的，但似乎你已经非常关注那个解决方案，所以如果你问其他事情让我知道。

Answer 3

听起来你需要一个隐藏的字段假装是按下的按钮，每个按钮都不需要名字，而是一个onclick事件来操纵隐藏字段的值。

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

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

调用form.submit（）时包含“成功”按钮

3 个答案: