Skip to content

Latest commit

 

History

History
95 lines (69 loc) · 2.35 KB

README.md

File metadata and controls

95 lines (69 loc) · 2.35 KB
Raw

Event Submitter polyfill

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

CI & CD

NPM

Installation

Bundled

import 'event-submitter-polyfill';

CDN

<head>
    <script src="https://polyfill.web-cell.dev/feature/EventSubmitter.js"></script>
</head>

Usage

HTML 5

<body>
    <form>
        <input name="data" />

        <button type="submit" data-name="first">Fisrt</button>
        <button type="submit" data-name="second">Second</button>
    </form>
    <script>
        document.querySelector('form')?.addEventListener('submit', event => {
            event.preventDefault();

            const { name } = event.submitter.dataset,
                { data } = event.target.elements;

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

React

import React, { FormEvent } from 'react';
import { render } from 'react-dom';

function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const { name } = event.nativeEvent.submitter.dataset,
        { data } = event.currentTarget.elements;

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

render(
    <form onSubmit={handleSubmit}>
        <input name="data" />

        <button type="submit" data-name="first">
            Fisrt
        </button>
        <button type="submit" data-name="second">
            Second
        </button>
    </form>,
    document.body
);

Roadmap

Acknowledge

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