当不是默认表单操作时，如何使用JavaScript或jQuery通过Enter键提交表单

Question

I have a page that has three "forms" that are apparent to the user. Under the hood, the page has only ONE form, using html:form as the JSP object controlling the entire page. When a user clicks on the image that is used for the individual submit buttons, it triggers an onClick() function, which bypasses the form's action and executes another action instead.

<html:form action="foo.do">
    <html:text property="name" styleClass="input" />
    <img src="bar.jpg" onClick="myFunction();" />
</html:form>

<script>
    function myFunction(){
        document.forms[0].action = "realPage.do";
        document.forms[0].submit();
    }
</script>

This script works, sending the user not to the default "foo.do" but rather to the destination of the function (realPage.do)

However, the problem is my users want to be able to submit the form just by hitting 'Enter' on their keyboard when in any one of the fields, of the particular "form" they want to submit. How can I use JavaScript or jQuery to recognize which "form" and, hence, which input field the user is in, detect the press of the 'Enter' key and submit using the same function as the button?

Answer 1

This should solve your problem

$(document).ready(function(){
    $("input").keyup(function (e) {
        if (e.keyCode == 13) {
            // Submit your form here
        }
    });
});

Answer 2

I would probably arrest the form submit and detect which element has focus. Something like this, where each pseudo-form has an identified wrapper element:

$(function() { // document.ready
    $('#myform').submit(function(event) {
        event.preventDefault();

        if ( $('#pseudoForm1 input').is(':focus') ) { ... }
        else if ( $('#pseudoForm2 input').is(':focus') ) { ... }
        else if ( $('#pseudoForm3 input').is(':focus') ) { ... }
    });
});

Answer 3

You could start with this -

$('input').keypress(function(e) {
    if(13 == e.keyCode) {
        var closestForm = $(this).closest('form');
        $(closestForm).submit();
    }
});