fix: serialize forms submitted by <button> #57
Conversation
A more modern approach using form submit event’s ‘submitter’ property. https://caniuse.com/mdn-api_submitevent_submitter
| var options = options || {}; | ||
| var action_arguments = form.serializeObjectWithSubmit(); | ||
| var action_arguments = form.serializeObject(); | ||
| if (["BUTTON", "INPUT"].includes(event.submitter && event.submitter.tagName)) { |
There was a problem hiding this comment.
this could probably be even more generic as just a
if (event.submitter && "name" in event.submitter && "value" in event.submitter)
but catching all <input> and <button> is a decent start
Also makes the handlers overridable, which makes it easier to override and/or implement new behavior. Depends on 40ants/reblocks#57
|
Why this is better approach (aside that it is more "modern")? |
|
Also, I see at https://caniuse.com/mdn-api_submitevent_submitter that Internet Explorer does not support "submitter" even in the latest version. This could be a problem for some users. |
This patch a fix for forms containing Another thing this catches is non-click submission events, e.g. if you're in an field and press Enter, a default submit button is selected and used as the submission. A regular post form catches that.
Internet explorer is obsolete and unsupported even by MS now I think. https://en.wikipedia.org/wiki/Internet_Explorer says development stopped in 2016 and all support ended 2022. |
|
Aha! I'll have to play with this first. Thank you for the PR. |
|
@hraban I've build this simple demo using the latest version of Reblocks and Reblocks-ui: https://gist.github.com/svetlyak40wt/47df0712195ca49c1ae96c62294c4bd3 And both Could you please update this example to make it possible to reproduce the problem which can be solved by "submitter"? |
|
The point is getting the value of the button. Try this one 40ants/reblocks-websocket#4 but substitute the |
|
@hraban sorry for a long delay with replies, I'm having some troubles with health and have to solve them asap. However today I've tested your changes from this PR and from your PR to rebocks-ui, on my example form and noticed that form is submitted as usual POST request with full page reload instead of Ajax request: 
Do you have any ideas how to fix this behaviour? |
|
@svetlyak40wt if you also use reblocks-ui you need this PR : 40ants/reblocks-ui#10 |
|
Good luck with your health btw!! Best wishes. |
Hmm, I've used both PRs. However now after the full application restart it works as Ajax requests. Probably some code was in conflict when I've switched branches and did quickload in my previous attempt. |
|
Merged as part of the #62 |
A more modern approach using form submit event’s ‘submitter’ property.
https://caniuse.com/mdn-api_submitevent_submitter
Also requires changes to reblocks-ui