CODEWITHSUNDEEP
javascriptjsf
meriton
meriton

Reputation: 70564

JSF: How to submit the form when the enter key is pressed?

It would appear to be a simple requirement, but I haven't found a simple solution yet:

In a JSF 1.2 / Richfaces 3.3 webapp, I have a form with input components of various types, followed by an <a4j:commandButton> and a <h:commandButton>. The former resets the form, the second performs some action with the data entered.

My goal is to have this action triggered when the user presses the enter key while entering data. How can I do that?

Edit: Generally, I have more than one <h:commandButton> per <form>. I'd like to designate a particular one as default action. Also, I'd like the solution to play nice with AJAX (which we use extensively).

Upvotes: 10

Views: 23719

Answers (5)

Dimitri Dewaele
Dimitri Dewaele

Reputation: 10659

Use the PrimeFaces component:

<!-- Default button when pressing enter -->
<p:defaultCommand target="submit"/>

Use this in combination with a focus component and you will rock!

<!-- Focus on first field, or first field with error -->
<p:focus context="feesboek"/>

Upvotes: 1

meriton
meriton

Reputation: 70564

In retrospect, solving this problem with the means HTML provides is far less brittle and easier to maintain, as the answers to the following related question show:

Multiple submit buttons on HTML form – designate one button as default

Upvotes: 2

Rajat Gupta
Rajat Gupta

Reputation: 26587

Just put this code in your JS file:

$('input,textarea').live('keydown',function(e) { // submit forms on pressing enter while focus is on any input elmnt inside form
    if (e.keyCode == 13) {
        $(this).closest('form').submit();
    }
});

Upvotes: 2

BalusC
BalusC

Reputation: 1108587

Unless you are using MSIE browser and in reality you've only one input field without a button, it should just be the default behaviour. Otherwise probably some (autogenerated) JS code has messed it up.

If you don't have textareas in the form, an easy fix would be the following:

<h:form onkeypress="if (event.keyCode == 13) submit();">

Or if you have textareas and you don't want to repeat the same keypress functions over all non-textarea input elements, run the following script during window onload.

for (var i = 0; i < document.forms.length; i++) {
    var inputs = document.forms[i].getElementsByTagName('input');

    for (var j = 0; j < inputs.length; j++) {
        inputs[j].onkeypress = function(e) {
            e = e || window.event;
            if (event.keyCode == 13) {
                this.form.submit();
                return false;
            }
        };
    }
}

Upvotes: 10

meriton
meriton

Reputation: 70564

Building on BalusC's answer I came up with the following (tested on IE and FireFox):

<h:form id="form" onkeypress="ifEnterClick(event, #{rich:element('searchButton')});">

where ifEnterClick is defined by:

/**
 * Handler for onkeypress that clicks {@code targetElement} if the
 * enter key is pressed.
 */
function ifEnterClick(event, targetElement) {
    event = event || window.event;
    if (event.keyCode == 13) {
        // normalize event target, so it looks the same for all browsers
        if (!event.target) {
            event.target = event.srcElement;
        }

        // don't do anything if the element handles the enter key on its own
        if (event.target.nodeName == 'A') {
            return;
        }
        if (event.target.nodeName == 'INPUT') {
            if (event.target.type == 'button' || event.target.type == 'submit') {
                if (strEndsWith(event.target.id, 'focusKeeper')) {
                    // inside some Richfaces component such as rich:listShuttle
                } else {
                    return;
                }
            }
        }
        if (event.target.nodeName =='TEXTAREA') {
            return;
        }

        // swallow event
        if (event.preventDefault) {
            // Firefox
            event.stopPropagation();
            event.preventDefault();
        } else {
            // IE
            event.cancelBubble = true;
            event.returnValue = false;
        }

        targetElement.click();
    }
}

Edit: Since selecting a value from Firefox form auto completion using the enter key fires a keydown event, but no keypress event, using onkeypress is preferable to onkeydown.

Upvotes: 7

Related Questions