How to prevent enter key submit in rails

Question

Simple example:

 <%= form_for :post, url: posts_path  do |f|%>
    <p>
        <%= f.label :title%><br/>
        <%= f.text_field :title%>
    </p>
    <p>
        <%= f.label :text%><br/>
        <%= f.text_area :text%>
    </p>
    <p>
        <%= f.submit%>
    </p>
<%end%>

I think this is a Rails default event handling. In here, if the user presses the enter key, it submits the params.

But in my case, I have to use the enter key for another event.

I have to search users with another input field by pressing the enter key.

But if I use form_for it submits the form. :(

How can I prevent submitting with the enter key in rails?

Do I have to use plain html tags? Like <form> tag and <submit> button?

Any good solutions?

score 30 · Accepted Answer · edited Jul 28 '19 at 16:02

30

Enter key submit is not a rails problem, it's an HTML / JS problem

Rails is backend (lives on the server); HTML / JS are client-side (live in browser) - they determine what functionality is enabled / disabled

I would get around your problem like this:

$('form').on('keypress', e => {
    if (e.keyCode == 13) {
        return false;
    }
});

And if you're using Turbolinks:

$(document).on('turbolinks:load', () => {
    $('form').on('keypress', e => {
        if (e.keyCode == 13) {
            return false;
        }
    });
});

Good reference: How to prevent ENTER keypress to submit a web form?

edited Jul 28 '19 at 16:02

Jason Swett

43,526
67
220
351

answered Dec 24 '13 at 10:16

Richard Peck

76,116
9
93
147

1

This isn't working for me. Have also tried putting the script directly in my form partial. Should $("form") be something different if I'm using `form_tag`? – sixty4bit Jul 31 '14 at 00:57
The `form` is the HTML element selector - are you using `Turbolinks` at all? – Richard Peck Jul 31 '14 at 07:30
If it's not working, the cause may well be Turbolinks. See my edit for a Turbolinks solution. – Jason Swett Jul 28 '19 at 16:03

score 1 · Answer 2 · edited May 23 '17 at 12:25

This is not a Rails specific question it's since it's a native behaviour of all browsers. If you have a button submit in your form (and you should :) ) then every browser will submit the form after hitting enter. *I haven't checked, but even without a clear submit button it should do it] The accepted answer is correct, but since there is a thread that gives a more complex example I would go through it too:

Prevent users from submitting a form by hitting Enter

How to prevent enter key submit in rails

2 Answers2