ampproject / ampproject/amphtml
AMP Form does not re-submit until previous POST request completes
- 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
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