使用 JQuery 提交 JSF 表单并调用服务器端函数

Question

我可以使用此代码提交我的 JSF 生成表单：

<h:commandButton  id="btnValidate" type="submit"  value="#{rb.REGISTER}" action="#{login.registerAccount}" />

但我想在提交表单之前处理 JS 代码，所以我将 onClick="test();" 和 commandButton 类型添加到 button ：

<h:commandButton  id="btnValidate" type="button"  value="#{rb.REGISTER}" action="#{login.registerAccount}" onClick="test();" />

我的test 功能：

function test(){    
   $('#j_idt14\\:register_form').submit();

}

使用此代码，我的表单已提交，但我的 login.registerAccount 函数不再被调用。

如何用JS提交表单并调用服务端函数（属性action）？

Answer 1

您不需要自己通过JS提交表单。它只会干扰 JSF 自己处理表单提交的工作。 onclick 只是为您提供了一个钩子，用于在提交表单之前执行一些 JavaScript 代码。除非您从 onclick 处理程序内部返回 false，否则将始终提交表单。

所以，如果您对阻止表单提交不感兴趣，只是想一直提交，只需删除 submit() 调用即可。

例如

<h:commandButton ... onclick="onbeforesubmit()" />

与

function onbeforesubmit() {
    // ...
}

或者，如果您真的有兴趣根据处理程序中的逻辑阻止表单提交，则相应地返回true 或false。返回false 将阻止表单提交。

例如

<h:commandButton ... onclick="return validate(this.form)" />

与

function validate(form) {
    var valid = true;

    // ... (some logic which may set it to false)

    return valid;
}

（请注意，我已经演示了一种在函数内部获取父窗体的方法比使用 $('#j_idt14\\:register_form') 更简单；如果需要，您只需执行 $(form) 将其包装在 jQuery 对象中）