ampproject / ampproject/amphtml

AMP Form does not re-submit until previous POST request completes

Open
#35,427 4 comments 0 reactions 0 assignees View on GitHub
Component: amp-form Stale Type: Feature Request WG: amp4email WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

We're trying to create AMP forms whose inputs are saved when you go out of focus for the field (i.e: on `change` event). So every time I change an input field and tab out to the next one, the form will be submitted. In this case, we do not want to have a submit button. We want to call the server for each input `change` event.

What ends up happening though is that if a POST request is already in progress, any subsequent `form.submit` will not re-submit the form until the previous request is complete.

I have an example [here](https://playground.amp.dev/?runtime=amp4email#share=PCFkb2N0eXBlIGh0bWw+CjxodG1sIOKaoTRlbWFpbCBkYXRhLWNzcy1zdHJpY3Q+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICA8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAuanMiPjwvc2NyaXB0PgogIDxzY3JpcHQgYXN5bmMgY3VzdG9tLWVsZW1lbnQ9ImFtcC1mb3JtIiBzcmM9Imh0dHBzOi8vY2RuLmFtcHByb2plY3Qub3JnL3YwL2FtcC1mb3JtLTAuMS5qcyI+PC9zY3JpcHQ+CiAgPHNjcmlwdCBhc3luYyBjdXN0b20tZWxlbWVudD0iYW1wLWJpbmQiIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAvYW1wLWJpbmQtMC4xLmpzIj48L3NjcmlwdD4KCiAgPHN0eWxlIGFtcDRlbWFpbC1ib2lsZXJwbGF0ZT5ib2R5e3Zpc2liaWxpdHk6aGlkZGVufTwvc3R5bGU+CiAgPHN0eWxlIGFtcC1jdXN0b20+CiAgICBoMSB7CiAgICAgIG1hcmdpbjogMXJlbTsKICAgIH0KICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgogIDxmb3JtIGlkPSJyb3dGb3JtIiBtZXRob2Q9InBvc3QiIG9uPSJzdWJtaXQ6QU1QLnNldFN0YXRlKHt0ZXh0OidTdWJtaXQgZXZlbnQnLCB0aW1lc1N1Ym1pdHRlZDogdGltZXNTdWJtaXR0ZWQgPT0gbnVsbCA/IDEgOiB0aW1lc1N1Ym1pdHRlZCArIDF9KTtzdWJtaXR0aW5nOkFNUC5zZXRTdGF0ZSh7dGV4dDonU3VibWl0dGluZyd9KTtzdWJtaXQtc3VjY2VzczpBTVAuc2V0U3RhdGUoe3RleHQ6J1N1Ym1pdCBzdWNjZXNzJ30pOyIgYWN0aW9uLXhocj0iaHR0cHM6Ly90ZXN0aW5nLTE1Ni5mcmVlLmJlZWNlcHRvci5jb20vdGVzdCIgZW5jdHlwZT0iYXBwbGljYXRpb24veC13d3ctZm9ybS11cmxlbmNvZGVkIj4KICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBuYW1lPSJFbXBsb3llZSBFbWFpbCIgb249ImNoYW5nZTpyb3dGb3JtLnN1Ym1pdCIvPiA8YnIvPgogICAgPGlucHV0IHR5cGU9InRleHQiIG5hbWU9IkVtcGxveWVlIE5hbWUiIG9uPSJjaGFuZ2U6cm93Rm9ybS5zdWJtaXQiIC8+IDxici8+CiAgICBUaW1lcyBzdWJtaXR0ZWQ6PHNwYW4gW3RleHRdPSJ0aW1lc1N1Ym1pdHRlZCI+PC9zcGFuPiA8YnIvPgogICAgICAgIDxzcGFuIFt0ZXh0XT0idGV4dCI+PC9zcGFuPgogIDwvZm9ybT4KPC9ib2R5Pgo8L2h0bWw+) with two inputs. Each input listens to the `change` event and calls `form.submit` when it occurs. When I type in the first input and tab to the next one, the form submits. I start typing in the next input while the previous submission is still ongoing. If I tab out before the previous submission completes, my new data will never get submitted to the server.

This seems like it would be a common use case where you want to either cancel or override the previous request. Can we add this to amp-form capability?

### Alternatives Considered

We could add a submit button and disable the form on submit (so there is never a need for a second submit) but we specifically want to recreate auto-save functionality.

### Additional Context

https://github.com/ampproject/amphtml/blob/cd97b6b7cb9a1b087c4c0f9ae7d1bf49fad776b5/extensions/amp-form/0.1/amp-form.js#L521-L527

Contributor guide

Open the contributing guide

Research direction

Reproduce the overlapping submissions in the linked AMP Playground example, then inspect extensions/amp-form/0.1/amp-form.js around lines 521-527. Determine the expected behavior for a second form.submit while the first POST is pending; done means the later input change is reliably submitted according to the chosen cancel-or-override behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.