Buy Now
Sign in

Form submits on enter key when using autocomplete

Gatsman , August 18 at 07:39
Gatsman
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
form_submit.jpg
healyhatman
https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
Gatsman
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?
healyhatman
Replace $ with jQuery
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
Gatsman
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.​
form_submit-2.jpg
Attachments
form_submit-2.jpg
form_submit-2.jpg
(76.29 KiB)
211 Downloads/Views
healyhatman
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.
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
Gatsman
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?
form_submit-3.jpg
Attachments
form_submit-3.jpg
form_submit-3.jpg
(120.38 KiB)
210 Downloads/Views
healyhatman
Pasting to notepad isn't any use. Try deleting the action and typing it out manually.
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
healyhatman
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; ​
​ }​
​});
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
Gatsman
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.
healyhatman
So you're talking about stopping enter submitting the form when an autoplay selection is chosen?
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
Gatsman
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.
healyhatman
What browser are you in? In chrome pressing enter on an autocomplete suggestion does not submit my form.
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
Gatsman
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.
Gatsman
healyhatman,
Do you have Firefox installed? can you verify this or am i the only one with this issue?
healyhatman
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.
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
healyhatman
First answer [url=https://stackoverflow.com/questions/9431616/firefox-autocomplete-enter-keypress-on-autocomplete-triggering-enter-on-textbo]here[/url] seems helpful.
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
Gatsman
Can you check your link again, is it correct?
healyhatman
https://stackoverflow.com/questions/9431616/firefox-autocomplete-enter-keypress-on-autocomplete-triggering-enter-on-textbo
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman