Prevent form submit on field enter key keydown?

Question

I've built a listener to prevent a form from submitting on a special ocasion.

I'm using google maps autocomplete api and basically I don't want to submit the form when the users press enter and the "recommended results box" is displayed. As the users are pressing enter to choose a value from the dropdown box and not to submit the form.

I've built a listener that catches the event correctly but I don't know how to prevent the form from being submitted.

$('body').live('keydown', function(e) {
    if($(".pac-container").is(":visible") && event.keyCode == 13) {
        e.preventDefault(); // Prevent form submission
        }
    });

I tried with e.preventDefault(); but it still submits the form. The form ID is: updateAccountForm

How can I prevent it from happening?

EDIT: I must point out that it seems that listening for keypresses directly on the search input conflicts with Google API invalidating the autocomplete functions. So no $('input#search') keydown/keypress is possible

`e.stopPropagation()` and/or `return false;` after it, solve the problem? — Luca Rainone, Aug 10 '12 at 08:50
I see now that you add listener on body. So the keypress event is fired after the input submit. Try to see `.bind` and see the third argument `preventBubble` (I'm not sure and I cannot test it now). Otherwise I think you should attach the listener in input field or attach a submit listener on form. — Luca Rainone, Aug 10 '12 at 09:11
I honestly cannot make out what to do from your suggestion. Please add it as a question and I'll test it! thanks — lisovaccaro, Aug 10 '12 at 09:13
Have you checked that you actually got anything in `event.keyCode`? It looks like you are using jQuery so you should check `e.which `. — some, Aug 10 '12 at 09:33

score 5 · Answer 1 · answered Aug 10 '12 at 09:37

5

The solution was actually pretty simple. All listeners seemed to fail however adding:

onkeydown="if($('.pac-container').is(':visible') && event.keyCode == 13) {event.preventDefault();}"

Directly to the input did the trick.

answered Aug 10 '12 at 09:37

lisovaccaro

32,502
98
258
410

Please excuse my ignorance, but what exactly do you mean when you say "adding it directly to the input"? – starsplusplus Apr 07 '15 at 11:36
He means to add it directly to the input tag thusly: – Flyingkiwi Jun 24 '15 at 13:05

score 4 · Accepted Answer · edited Sep 29 '13 at 20:52

4

I think you should try using something like this … wrapping in a check for the visibility of your container

$('body').keypress(function(e) 
{
  if (e.keyCode == '13') {
     e.stopPropagation()

   }
});

The article here has a good explanation.

edited Sep 29 '13 at 20:52

nilfalse

2,380
2
19
16

answered Aug 10 '12 at 08:55

Daniel Elliott

22,647
10
64
82

this didn't work for me, because by the time the keypress event was fired the .pac-container has already disappeared (I notice you haven't got the original posters condition to check .pac-container visibility). So the way this works, **all** form submissions with Enter will be rejected which won't really work. The only answer that seemed to work was Liso22 suggestion below. – David Chiew Jan 01 '14 at 02:40
Also there is an error in the *if* clause, keyCode is not a string: `if (e.keyCode == 13)` – ZombieBsAs Nov 01 '16 at 15:39

score 2 · Answer 3 · answered Aug 10 '12 at 09:23

try this

$('body').live('keydown', function(e) {
    if($(".pac-container").is(":visible") && e.keyCode == 13) {
        e.stopPropagation(); // Prevent form submission
    }
});

please see e.keyCode instead of event.keyCode and e.stopPropagation() instead of e.preventDefault

tyler.frankenstein · Answer 4 · 2015-04-08T23:50:36.433

1

To prevent the enter key from submitting a form on a Google Places API autocomplete's text field, I needed a keydown handler...

$(document).on('keydown', '#my-autocomplete', function(e) {
    if (e.which == 13) {
      $('#my-autocomplete').show();
      return false;
    }
});

... and a place_changed listener attached to the autocomplete after it was instantiated :

var my_autocomplete = new google.maps.places.Autocomplete(/*...*/);
google.maps.event.addListener(my_autocomplete, 'place_changed', function() {
    var place = my_autocomplete.getPlace();
    if (!place.place_id) { return; }
});

Not that it matters, but it might, this solution worked inside a jQuery Mobile web app.

edited Apr 08 '15 at 23:50

answered Apr 08 '15 at 13:08

tyler.frankenstein

2,314
1
23
36

1

I think the above first code example is sufficient as it allows you to target a specific element and not just the whole document. You may want to use enter every where "except" on a particular element(s). Not sure why there was no up vote. I guess the OP needed some functionality with google maps, as for me I needed no such solution other than to target and element and prevent submission when pressing "Enter/Return". – greaterKing Oct 06 '15 at 19:31

score 0 · Answer 5 · answered Aug 10 '12 at 08:54

0

preventing form submission

 <form method="post">
    <input type="text" id="search">

    </form>

    <script>
        $('input#search').keypress(function(e) {
          if (e.keyCode == '13') {
             e.preventDefault();

           }
        });
    </script>

answered Aug 10 '12 at 08:54

Sibu

4,609
2
26
38

I tried this before I should have pointed it out. It seems that Google API invalidates either intently or not the autocomplete input if you add a keypress listener directly to it. That's why I was trying to listen to the body. – lisovaccaro Aug 10 '12 at 08:57

score 0 · Answer 6 · edited May 23 '17 at 12:19

Relevant question: Google maps Places API V3 autocomplete - select first option on enter

When I used the Google Maps Autocomplete box I wanted to make 'enter' and 'tab' select the first item. I followed @amirnissim 's solution linked above, to simulate a down arrow key press if either enter/tab are pressed from the input element.

When I coded it I didn't have those inputs as part of a form. I'm not sure how to prevent the form from sending on enter key (in fact that's how I found this question) but when I used Autocomplete my input was not part of a form.

Prevent form submit on field enter key keydown?

6 Answers6