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?

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

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