ampproject / ampproject/amphtml

amp-form verify XHR seems broken with enctype=application/x-www-form-urlencoded

Open
#36,076 1 comment 0 reactions 0 assignees View on GitHub
Stale Type: Bug
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

amp-form verify XHRs seem broken when the form has `enctype=application/x-www-form-urlencoded`.

/to @krdwan
/to @samouri

### Reproduction Steps

Repro AMP HTML:

```


That username is already taken
Invalid character in username



Success! Thanks {{name}} for trying the amp-form demo! Try to insert the word "error" as a name input in the form to see how amp-form handles errors.




{{#verifyErrors}}

{{message}}


{{/verifyErrors}}
{{^verifyErrors}}

Something went wrong. Try again later?


{{/verifyErrors}}

Submission failed





```

No verify XHR is sent after each change to the input fields. Removing `enctype=application/x-www-form-urlencoded` fixes the issue.

It looks like the bug was introduced in #27644. The following line conditional sets `body` to a string:

https://github.com/ampproject/amphtml/blob/f564b7ee3cd59972fe86c4edc3052db70852c6f0/extensions/amp-form/0.1/amp-form.js#L313-L314

However, a few lines down the code unconditionally assume `body` is a `FormDataWrapper` object and calls `append` on it:

https://github.com/ampproject/amphtml/blob/f564b7ee3cd59972fe86c4edc3052db70852c6f0/extensions/amp-form/0.1/amp-form.js#L328-L330

### Relevant Logs

_No response_

### Browser(s) Affected

_No response_

### OS(s) Affected

_No response_

### Device(s) Affected

_No response_

### AMP Version Affected

_No response_

Contributor guide

Open the contributing guide

Research direction

Start in extensions/amp-form/0.1/amp-form.js around the linked lines that construct the verify XHR body and append form data. Reproduce the AMP form example with enctype="application/x-www-form-urlencoded", then verify that changes trigger the verify XHR and that existing form behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.