Seam / JSF表单提交触发按钮onclick事件

I have a search form with a query builder. The builder is activated by a button. Something like this

我有一个带有查询构建器的搜索表单。构建器由按钮激活。像这样的东西

<h:form id="search_form">
  <h:outputLabel for="expression" value="Expression"/>
  <h:inputText id="expression" required="true" value="#{searcher.expression}"/>
  <button onclick="openBuilder(); return false;">Open Builder</button>
  <h:commandButton value="Search" action="#{searcher.search}"/>
</h:form>

The result is HTML that has both a <button/> and an <input type="submit"/> in the form. If the user enters a string into the expression field and hits the enter key rather than clicking the submit button, the query builder is displayed when the expected behavior is that the search be submitted. What gives?

结果是HTML在表单中同时包含和。如果用户在表达式字段中输入字符串并按Enter键而不是单击“提交”按钮,则在预期行为是提交搜索时,将显示查询构建器。是什么赋予了?

3 个解决方案

#1

A button in an HTML form is assumed to be used to submit the form. Change button to input type="button" and that should fix it.

假定HTML表单中的按钮用于提交表单。更改按钮以输入type =“button”,这应该修复它。

Alternatively, add type="button" to the button element.

或者,将button =“button”添加到按钮元素。

#2

as first, give an ID to Search button. Then,on textbox, you could intercept client event onkeydown, with a (javascript) function like this:

首先,为“搜索”按钮提供ID。然后,在文本框上,您可以使用这样的(javascript)函数拦截客户端事件onkeydown:

  function KeyDownHandler(event)
    {
        // process only the Enter key
        if (event.keyCode == 13)
        {
            // cancel the default submit
            event.returnValue=false;
            event.cancel = true;
            // submit the form by programmatically clicking the specified button
            document.getElementById('searchButtonId').click();
        }
    }

I hoper i help you.

我好好帮助你。

#3

if there is a single input field within the form, many browsers submit the forms automatically when the enter key is hit.

如果表单中有单个输入字段,许多浏览器会在按下回车键时自动提交表单。

Try

Add another input field. Hide it by styling it so it isn't visible. (e.g., <input type="text" name="bogusField" style="display: none;" />

添加另一个输入字段。通过样式化来隐藏它,使其不可见。 (例如,

Block the enter key form submit behavior within a JavaScript event handler (e.g., here or here). Even better, use a GUI toolkit that may help with this (e.g., GWT)

在JavaScript事件处理程序(例如,此处或此处)中阻止输入密钥表单提交行为。更好的是,使用可能对此有帮助的GUI工具包(例如,GWT)

#1