Defining a default button when pushing enter key

Question

I have a Grails app which contains a .gsp page with a number of textFields, several submitToRemote buttons, and a couple actionSubmit buttons on it. When filling out the textFields, I want to be able to hit enter after I'm done, and have it do the same as clicking a specific submitToRemote button. Currently it is acting as if I clicked a specific actionSubmit button that I never intentionally specified.

I found this: How to trigger HTML button when you press Enter in textbox? . It seems like what I want, so I adapted it to my page, but it doesn't appear to be doing anything.

I'll forgo posting the entire .gsp but add what I feel is appropriate for the question.

Here is the button that is being activated currently:

<br>
    <g:hiddenField name="type" value="head"/>
    <g:actionSubmit value="Get Reports" action="showReports"/>
<br>

Here is the button that I want to be activated:

<g:submitToRemote value="find" url="[action: 'findCustomer']"
update="results" />

So what I did was add an id to both the target submitToRemote button, and 1 textField, then added the <g:javascript> tag wrapping around the scrip from the above linked page. Which looks like this:

<g:textField name="lastName" id="inputTextBox"/>

...

<g:submitToRemote value="find" id="findCustomer" url="[action: 'findCustomer']"
update="results" />

...

<g:javascript>
 $(document).ready(function(){
   $('#inputTextBox').keypress(function(e){
     if(e.keyCode==13)
     $('#findCustomer').click();
  });
});
</g:javascript>

Also, I am using the jQuery library as such:

<g:javascript library="jquery" />

I'm not sure if my approach here is flawed, as I do need it to work on any of the 10 textFields on the page. I went through the grails documentation and couldn't find anything that really matched this...

score 2 · Accepted Answer · answered Dec 23 '14 at 20:54

I found the solution was quite close to what I had.

First I had to add an id to my submitToRemote button:

<g:submitToRemote value="find" url="[action: 'findCustomer']" update="results" id="submitForm"/>

Then in my main.gsp I added the proper script:

$(document).bind("keypress", function (e) {
            if (e.keyCode == 13) {
                $("#submitForm").click();
                return false;
            }
        });

The really important thing here is the return false; because without it, it will click the button, and then submit the form which is not what I needed.

Defining a default button when pushing enter key

1 Answers1