Forums

I know that the forms default behaviour is to be submitted if the cursor if focused in an input field and the Enter key is pressed but it should not be when you select something from the browsers autocomplete.
Using the Basic Contact Form Demo in the picture, using arrows keys to navigate to an option from the browsers autocomplete and clicking on Enter key will send the form.
I believe that the default behaviour should be to select the "option" and write it in the input field and only send the form if another Enter key is pressed.
​
Please correct and advice if i am wrong.
PS. I think that this is happening only with Firefox
​

https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter

Hello healyhatman,
Adding the code:

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

in a Javascript in the design section did not change anything.
Did you check it did it work for you?

Replace $ with jQuery

This does not work.
It's not a jQuery conflict i get no errors in console, (even with jQuery instead of $) the Enter key press is recognized but the form is still send.
See image after i navigate with arrows and click Enter.
​
PS. I added an alert into the JavaScript.

Get everything out of the function part, put it in a custom JS element with the document ready checkbox ticked. I have this exact code on my forms.
​
So you code should start at jQuery(window)
​
Also, VERY IMPORTANT, don't copy+paste from the forums it adds code breaking hidden characters.

If it works for you with Firefox I don't know what i am doing wrong in my form.
The alert is called but the form sends.
I always copy paste to notepad first and i have just as you said in a JS with the domready checked.
Could you upload your working demo form so i can compare them?
​

Pasting to notepad isn't any use. Try deleting the action and typing it out manually.

You shouldn't even need the jQuery bit sorry. Here's my example blocking enter on one single element. This is inside the JS block with the "Add inside dom ready.." checkbox ticked.
​

$('#autocomplete').keydown(function(event)
{ 
 if(event.keyCode == 13) 
 {
 event.preventDefault();
 return false; 
 }
});

Hello healyhatman, thank you for the code, this code works but i think you misunderstood my issue.
This code will block the use of the Enter key but what i want is for the form to have the default behaviour.
A user should be able to send the form by the use of the Enter key (when focused in an input field) but not when they select from the browsers input history drop down.
When you select from the drop down it should select that option paste it in the input and if Enter is pressed for a second time send the form.

So you're talking about stopping enter submitting the form when an autoplay selection is chosen?

Yes this is an issue only when the user selects by using the arrow keys to navigate and hits enter to select one of the browsers autocomplete suggestions for any of the forms fields (check the first image i posted).
Otherwise sending the form by hitting Enter if default behaviour and i am OK with it.

What browser are you in? In chrome pressing enter on an autocomplete suggestion does not submit my form.

I am using Firefox 61.0.2
It only happens with Firefox but only with chronoforms 6 other forms (even chronoforms 5) don't have this issue.

healyhatman,
Do you have Firefox installed? can you verify this or am i the only one with this issue?

Installed Firefox just for you and can confirm that it happens in Firefox as you've described. As such I'd say it's a Firefox problem.

First answer [url=https://stackoverflow.com/questions/9431616/firefox-autocomplete-enter-keypress-on-autocomplete-triggering-enter-on-textbo]here[/url] seems helpful.

Can you check your link again, is it correct?

https://stackoverflow.com/questions/9431616/firefox-autocomplete-enter-keypress-on-autocomplete-triggering-enter-on-textbo