Question

这是提交按钮：

<h:commandButton 
    actionListener="#{regBean.findReg}" 
    action="#{regBean.navigate}" value="Search" />

这是表格：

<h:form onsubmit="this.disabled=true;busyProcess();return true;">

如果按下提交按钮，页面将显示“忙碌”图标，直到处理请求为止。问题是，表单永远不会提交，请求永远不会到达后端。但是，如果我反而取消“禁用”电话：

<h:form onsubmit="busyProcess();return true;">

然后一切正常。有什么想法吗？

Answer 1

JSF依赖于提交按钮的名称 - 值对的存在来调用服务器端的特定操作。如果在提交表单之前禁用表单（至少是按钮），则请求参数映射中不会提供任何信息，JSF也不会调用任何操作。

您最好的选择是引入一个超时，在提交后约50毫秒禁用该按钮。 E.g。

onsubmit="setTimeout(function(){document.getElementById('formId:buttonId').disabled=true;},50);busyProcess();"

最后的显式return true;是超级的。此外，直接禁用HTML表单元素不起作用，因为它没有disabled属性，您要禁用该按钮（如果需要，还要禁用其他输入元素）。

以下是一些改进：

<h:form onsubmit="busyProcess(this);">

与

function busyProcess(form) {
    setTimeout(function() {
        for (var i = 0; i < form.elements.length; i++) {
            form.elements[i].disabled = true;
        }
    }, 50);

    // Remnant of your code here.
}

更新：因为我想知道你告诉它“有效”，我在各种浏览器中测试了表单的disabled属性，它只适用于MSIE（令人惊讶的......），但是不在其他（真实）浏览器中。您不希望与浏览器相关，因此请忘记它并继续禁用表单的各个元素。

Answer 2

将this.disabled = true更改为[buttonref].disabled = true

Answer 3

我很确定禁用整个表单对浏览器来说意味着你不希望它可以提交。禁用单个输入元素时，这些元素不会包含在发布表单时发送到服务器的参数中。

Answer 4

您已停用整个表单，您只需要禁用该按钮。

此外，您还需要确保busyProcess（）返回一个truthy值，或者也可以禁用提交。

Answer 5

如果您希望用户不提交任何内容，请在表单上方显示一个图层，并从活动组件中删除焦点。

另一种方法是确保AJAX请求使用具有队列的公共通道，其中一次只处理一个请求（使用原型等框架很容易）

Answer 6

BalusC，您非常有创意的超时选项效果很好。当我在其他浏览器中尝试“禁用”属性时，我实际上得出了相同的结论。它在Opera和Firefox中根本没有禁用该表单。我只是将它归结为那些比IE更通用的浏览器。

Sean K，仅在不设置超时的情况下禁用该按钮会产生与表单禁用相同的问题，因为信息将传递给服务器。

感谢你们的帮助！

当JavaScript禁用表单时，JSF表单不会被提交

6 个答案: