Seam/JSF form submit firing button onclick event

Question

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?

Answer 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.

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

Answer 2

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

  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.

Answer 3

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

Try

1. Add another input field. Hide it by styling it so it isn't visible. (e.g., <input type="text" name="bogusField" style="display: none;" />
2. 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)