event-submitter-polyfill
v0.4.0
Published
A polyfill for submitter property of form Submit Event, which is written in TypeScript.
Downloads
1,529
Readme
Event Submitter polyfill
A polyfill for submitter property of <form /> Submit Event, which is written in TypeScript.
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.