https://github.com/idea2app/event-submitter-polyfill

A polyfill for submitter property of <form /> Submit Event, which is written in TypeScript.
https://github.com/idea2app/event-submitter-polyfill

event form polyfill submit submitter typescript

Last synced: about 1 month ago
JSON representation

A polyfill for submitter property of <form /> Submit Event, which is written in TypeScript.

• Host: GitHub
• URL: https://github.com/idea2app/event-submitter-polyfill
• Owner: idea2app
• License: lgpl-2.1
• Created: 2021-08-01T12:51:22.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-08-02T18:15:45.000Z (5 months ago)
• Last Synced: 2024-11-14T05:45:37.469Z (about 2 months ago)
• Topics: event, form, polyfill, submit, submitter, typescript
• Language: TypeScript
• Homepage:
• Size: 146 KB
• Stars: 6
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Event Submitter polyfill

A polyfill for [`submitter` property of `` Submit Event][1], which is written in [TypeScript][2].

[![CI & CD](https://github.com/idea2app/event-submitter-polyfill/actions/workflows/main.yml/badge.svg)][3]

[![](https://data.jsdelivr.com/v1/package/npm/event-submitter-polyfill/badge?style=rounded)][4]

[![NPM](https://nodei.co/npm/event-submitter-polyfill.png?downloads=true&downloadRank=true&stars=true)][5]

## Installation

### Bundled

```javascript

import 'event-submitter-polyfill';

```

### CDN

```html

    

```

## Usage

### HTML 5

```html

    

        

        Fisrt

        Second

    

    

        document.querySelector('form')?.addEventListener('submit', event => {

            event.preventDefault();

            const { name } = event.submitter.dataset,

                { data } = event.target.elements;

            fetch(`/api/${name}`, { data: data.value });

        });

    

```

### React

```tsx

import React, { FormEvent } from 'react';

import { render } from 'react-dom';

function handleSubmit(event: FormEvent) {

    event.preventDefault();

    const { name } = event.nativeEvent.submitter.dataset,

        { data } = event.currentTarget.elements;

    fetch(`/api/${name}`, { data: data.value });

}

render(

    

        

        

            Fisrt

        

        

            Second

        

    ,

    document.body

);

```

## Roadmap

-   [x] [`SubmitEvent` class in TypeScript][6]

## Acknowledge

We rewrite the source code based on [Tobias Buschor's answer in StackOverflow][7].

[1]: https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter

[2]: https://www.typescriptlang.org/

[3]: https://github.com/idea2app/event-submitter-polyfill/actions/workflows/main.yml

[4]: https://www.jsdelivr.com/package/npm/event-submitter-polyfill

[5]: https://nodei.co/npm/event-submitter-polyfill/

[6]: https://github.com/microsoft/TypeScript/issues/40811

[7]: https://stackoverflow.com/a/61110260