A polyfill for submitter property of <form /> Submit Event, which is written in TypeScript.
import 'event-submitter-polyfill';<head>
<script src="https://polyfill.web-cell.dev/feature/EventSubmitter.js"></script>
</head><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>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
);We rewrite the source code based on Tobias Buschor's answer in StackOverflow.