◆ 空 form を作って即 submit する
◆ formdata イベント中で送信したい FormData のデータを event の FormData に append する

以前さらっと書いた formdata イベントですが よくよく考えてみると これまでできなかったことができるようになった重要な機能です

これまでは FormData を送信するには fetch や XHR などバックグラウンド処理でしかできませんでした
form を使った送信はそのフォームに属した input にデータが入っている必要があります
テキストだけなら FormData から input を全部作るという荒業もありますがファイルが混ざると type="file" の input に値をセットできないので限界がありました
base64 のテキストで送るなどはできましたが 独自の変換が必要ですしサーバ側の処理も変更になります

formdata イベントでは FormData を操作することで form が submit するデータを制御できます
なので空 Form を作って即 submit して そのときの formdata イベントで FormData にデータを追加すれば FormData を form から送信してることになります

const submit = (url, method, fd) => {
const form = document.createElement("form")
form.action = url
form.method = method
form.addEventListener("formdata", eve => {
for(const [name, value] of fd.entries()) {
eve.formData.append(name, value)
}
})
document.body.append(form)
form.submit()
}

使用例はこんな感じです

const testSubmit = () => {
const fd = new FormData()
fd.append("foo", "bar")
submit("baz", "GET", fd)
}
testSubmit()