Form submit causes undesired request / page reload

[noneymous]

Bug Report

I'm building a single page (JavaScript) application and I have an issue with the form submission. Basically, I never want the page to reload. Everything should be handled with JavaScript/Ajax in the background. It seems Fomantic is automatically attaching "submit" events to the form under certain circumstances. If triggered, the form executes a standard POST/GET request, causing the page to reload.

Now I've figured out two circumstances, under which the standard "submit" is triggered:

1. The clicked button element has class "submit" assigned
2. The >enter< key is hit

Well, I can easily remove the submit class from the button, however, I haven't figured out a way to get rid of the >enter< key event (or better - redirect it to my custom AJAX submit function). So, my application behaves correctly, if the submit button is clicked, but not if >enter< is pressed.

Expected result

Same behaviour, no matter whether the user clicks the submit button or presses the >enter< key.

Actual result

The >enter< submit event leads to an undesired behaviour, sending a POST/GET request, when an AJAX requet is desired... and causing an undesired page (re)load.

Testcase

https://jsfiddle.net/y4nc2ob6/

Here is a fiddle. On click nothing happens, because the onclick events do not contain code. However, if you fill in some string and hit >enter<, you can observe a GET request being sent out. You can see it in the developer tool bar... or fiddle will show a 404 error. The page should be reloaded too, but I guess it happens too quickly with the short fiddle HTML code.

Version

I tried with different Fomantic and Jquery versions, including the latest ones.

[jamessampford]

You could always use JavaScript to listen for enter being pressed and prevent it from submitting the form? I'd imagine you'd only want this within a input field, since textarea could have legit new lines put in for paragraphing...

Quick search on Stackoverflow yields the below:
https://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form#:~:text=Add%20this%20tag%20to%20your,form%20with%20some%20JavaScript%20function.&text=To%20prevent%20form%20submit%20when,of%20element%20sent%20the%20event.

[lubber-de]

The FUI logic to fetch (also) the enter key can basically disabled by keyboardShortcuts: false.
However there still remains the (current) browsers own "fetching enter" logic in forms, which is causing this nevertheless.

For your usecase you can simply add onsubmit="doAjaxStuff();return false;" as a form attribute which will also fetch the browser logic. Of course you then need to do your own ajax submission logic (perhaps inside FUIs onSuccess callback.)

See your adjusted jsfiddle here https://jsfiddle.net/lubber/he8szqno/9/
We already had the same question here #882 (comment)

[noneymous]

You could always use JavaScript to listen for enter being pressed and prevent it from submitting the form? I'd imagine you'd only want this within a input field, since textarea could have legit new lines put in for paragraphing...

Quick search on Stackoverflow yields the below:
https://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form#:~:text=Add%20this%20tag%20to%20your,form%20with%20some%20JavaScript%20function.&text=To%20prevent%20form%20submit%20when,of%20element%20sent%20the%20event.

Hi,

thank you for your quick support. Unfortunately, it's not enough, because it just adds another "onkeypress" handler. The others execute nevertheless. However, based on your idea, I tried adding onsubmit="return false;" directly to my form. It has highest priority and overrides all other form submit events.

Now I see the following issues:

• Usability, the user cannot use >enter< at all anymore... I often submit with >enter< and I am my biggest user ;-)
• The form validation triggers nevertheless.
  1. I press >enter< the first time, the input field is highlighted in red
  2. I fill in some valid value and press >enter< again, the form turns green again but doesn't submit... it feels weird
• In my case, I do have a "jexcel" spreadsheed between my form elements. Well, >enter< is used by it to confirm cell values, like you would expect from Excel. So, everytime, a value is entered the form validation triggers...

I patched that by removing all "submit" events on jexcel focus (caching the original ones), and re-attaching it on blur... but that's really dirty...

[noneymous]

The FUI logic to fetch (also) the enter key can basically disabled by keyboardShortcuts: false.

This actually did help. Neither the form is submitted, nor the validation is triggered... It did neither require onsubmit="return false;" in the form, nor my dirty hack to trick the validation.

Now it is just restricted usability...

[noneymous]

Thank you guys, this did the trick. Not perfect, but I can live with it!

[jamessampford]

You could continue to use enter, but call your Ajax function when enter is captured/prevented for submitting the form. I'm unsure if keyboardShortcuts has some kind of callback, but if it's not used you can do what you need

[noneymous]

You could continue to use enter, but call your Ajax function when enter is captured/prevented for submitting the form. I'm unsure if keyboardShortcuts has some kind of callback, but if it's not used you can do what you need

True...

[lubber-de]

Closing for now, because i don't think we should hardcode any kind of "onsubmit=return false" logic. Workarounds are given above.