adobe / adobe/helix-website

Form block doesn't trigger submit event

Open
#360 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
45
Forks
59
Avg merge
3d 7h
Merged PRs (30d)
12

Description

### Expected Behaviour
When a form is submitted a `submit` event is triggered for the form.

### Actual Behaviour
Forms are submitted by a listener on the `click` event of the submit button. The payload is generated and POST'ed as a json via `fetch` API. This prevents the triggering of the `submit` event.
This behaviour prevents other features such as RUM or Conversion tracking to work automatically, as they listen to `submit` events

### Reproduce Scenario (including but not limited to)
https://www.hlx.live/developer/forms

#### Steps to Reproduce
1. In your chrome browser open: https://www.hlx.live/developer/forms
2. Open developer tools -> Console and add a `submit` listener on the form element. e.g.:`document.getElementsByTagName('form')[0].addEventListener('submit', (e) => {console.log('form submitted');})`
3. Scroll down to the sample form in the page, enter some data and click submit button.
4. Notice that in the browser Console, there is no message `form submitted`

Contributor guide

Open the contributing guide

Research direction

Reproduce the behavior at https://www.hlx.live/developer/forms by adding the submit listener described in the issue and submitting the sample form. Locate the form's click-driven submission handling, then verify that a normal submit event is triggered and that the existing JSON POST behavior still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.