0

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?

dihakz
  • 557
  • 1
  • 15
  • 30

3 Answers3

0

This should solve your problem

$(document).ready(function(){
    $("input").keyup(function (e) {
        if (e.keyCode == 13) {
            // Submit your form here
        }
    });
});
Evidica
  • 1,464
  • 1
  • 14
  • 19
  • Hitting the enter key submits the form the input field is in, before it even has a chance to run this code. – dihakz May 28 '14 at 15:43
0

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') ) { ... }
    });
});
isherwood
  • 58,414
  • 16
  • 114
  • 157
  • I tried just the first part, to arrest the form submit by using the preventDefault() function, and the form still submitted. – dihakz May 28 '14 at 15:42
  • http://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting – isherwood May 28 '14 at 16:23
0

You could start with this - 

$('input').keypress(function(e) {
    if(13 == e.keyCode) {
        var closestForm = $(this).closest('form');
        $(closestForm).submit();
    }
});
Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
  • This might have worked, if each "form" were truly separate forms (they're all part of one single form element.) – dihakz May 28 '14 at 15:41
  • If it is all one form and you have to break these out, perhaps you can `wrap()` those inputs in a form element, perform the submit, then `unwrap()` them. You could insert div's that indicate your wrapping points should you need them. – Jay Blanchard May 28 '14 at 15:43