jquery - 使用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();" />

我的测试功能:

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

}

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

如何用JS提交表单并调用服务器端函数(属性action)？

Answer 1

不需要自己通过JS提交表单。它只会干扰 JSF 自己处理表单提交的工作。 onclick 只是为您提供一个钩子(Hook)，以便在提交表单之前执行一些 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 对象中(如果需要)