Fomantic-ui: Form submit firing twice

[brunotourinho]

Hey guys!

I'm having a problem, but it's not quite consistent.

Whenever I click on a submit button inside a form:
<form asp-action="Login" asp-controller="Login" method="post" class="ui large form" asp-antiforgery="true">...

<input type="submit" value="Enter" class="ui fluid large submit button" />

Sometimes it fires the form once as expected but sometimes it fires twice.

I'm in a Asp.NET Core environment

I'm pulling my hair out, It's causing duplication inserts on my application.

Any help would be appreciated.

[lubber-de]

Enable debugging and watch console to perhaps get some hint, if it's really FUI doing something wrong.

$('.ui.form').form({
  debug:true
});

if you however do _not_ use FUI form behavior (but just the CSS classes), then it seems to be caused by some other JS from your code (or ASP.net generated form widgets?).

So please provide a reproducable jsfiddle-testcase (don't need ASP.net for that, the generated form should do it alone, but i doubt, that makes it reproducable, as said, i am guessing additional code

[jamessampford]

Could it be that disabling the submit button after it being clicked (or the form submitting) help prevent this? Would need to use some javascript, but certainly helped me with something similar (albeit I didn't use FUI to handle any form submissions)

[brunotourinho]

I cant find a reason...

First, when I hit Enter, it sends the form anyway, even with :
$.fn.form.settings.keyboardShortcuts = false;

When I hit Enter:
Debug 1

When I click on Submit
Debug 2

Another example in this fiddle here

[brunotourinho]

The behavior doesn't occur in Firefox... it's a Google Chrome only issue... 🤷‍♀️
Seems something related to the submit process...

Other weird aspect is that "keyboardShortcuts = false" should prevent from posting with "Enter" key, isn't working as well.

[lubber-de]

@brunotourinho I am unfortunately not able to reproduce the mentioned behavior using your jsfiddle. Not even in Chrome 😕

See the following gif: using https://jsfiddle.net/jokpw9g7/

• First, i submitted by Enter -> the simple "onsubmit" handler is called only once
• Second, i submitted via submit button -> also only called once
  

(Even if i remove the "return false" to really try to call a remote page, it is only called once.
And i also dont see double entries from FUI debug 😢

Are you able to reproduce this in the given jsfiddle? Because your screenshots belong to some localhost environment which might has different code. Are you using latest chrome?

[lubber-de]

@brunotourinho Regarding the "keyboardShortcuts:false should prevent Enter-key submit":
This seems to be a default behavior (tried in chrome/edge) in current browsers, because actually the code which is monitoring keyboard entries is indeed not initialized by FUI when keyboardShortcuts:false, thus it is also not checking if the enter key is pressed to _prevent_ submitting the form.
I suggest to create a separate issue for that, because i think we have to implement a new setting just to prevent Enter for form submission and make use of the keyboard event routine all the time (to check for enterkey to prevent default behavior)

[brunotourinho]

Thank you so much @lubber-de for your time.

I'm gonna check for JS leaks in my code. I use some injected partial views, maybe I'll find the reason.

BEST FRAMEWORK EVER