Prevent form submission in key input field?

Question

I built a listener to prevent form submission using a special ocasion.

I use google maps autocomplete api and basically I don’t want to submit the form when users press the enter button and the Recommended Results window is displayed. When users click, enter to select a value from the drop-down list and not to submit the form.

I created a listener that catches the event correctly, but I don’t know how to prevent form submission.

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

I tried with e.preventDefault (); but he still represents the form. Form ID: updateAccountForm

How can I prevent this?

EDIT: I should note that it seems that listening to keystrokes directly to the search input is contrary to the Google API, which deprives the autocomplete function. So $('input#search') keydown / keypress is not possible

Answer 1

I think you should try using something like this ... wrap your container visibility check

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

The article here has a good explanation.

Answer 2

The solution was quite simple. It seems that all listeners have failed by adding:

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

Directly at the entrance was a trick.

Answer 3

try it

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

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

Answer 4

To prevent entering an input key from the Google Places API autocomplete text box , 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 autocomplete after its creation:

 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 important, but it could be, this solution worked in jQuery Mobile web application.

Answer 5

form submission prevention

  <form method="post"> <input type="text" id="search"> </form> ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ <script> $('input#search').keypress(function(e) { if (e.keyCode == '13') { e.preventDefault(); } });​ </script> 

Answer 6

Relevant question: Google Maps. API Autocomplete API V3 - select the first option when entering

When I used Google Maps autocomplete, I wanted to make 'enter' and 'tab' select the first item. I followed the @amirnissim solution linked above to simulate a down arrow key if either an input / tab is pressed on an input element.

When I encoded this, I did not have these inputs as part of the form. I'm not sure how to prevent the form from being submitted to the input key (actually, as I found this question), but when I used Autocomplete, my input was not part of the form.