为一个窗体调试两个按钮

Question

我已经看了这个问题和这个问题，但使用<button>标签的解决方案对我不起作用。

我想这是因为我使用的是FormData，但我认为FormData会获取所有提交的键和值。

这里有一个简单的JSFiddle来说明我想做的事情，但它不起作用。我希望看到first和second值显示在FormData对象中，但只显示input-data。

我需要能够确定按下了哪个按钮来提交表格。

function handleSubmit(event) {
event.preventDefault(); // don't have the browser refresh on submit
const formData = new FormData(event.target);
for (var pair of formData.entries()) {
console.log(pair[0]+ ' ==> ' + pair[1]);
}
}
const form = document.getElementById('form');
form.addEventListener('submit', handleSubmit);

<form id="form">
<input name="input-data"/>
<button type="submit" name="action" value="first">Submit</button>
<button type="submit" name="action" value="second">Another Submit</button>
</form>

Answer 1

FormData不收集按钮的值。您可以设置隐藏输入的值，如下所示：

function handleSubmit(event) {
event.preventDefault(); // don't have the browser refresh on submit
document.getElementById('action').value = event.submitter.value;
const formData = new FormData(event.target);
for (var pair of formData.entries()) {
console.log(pair[0]+ ' ==> ' + pair[1]);
}
}
const form = document.getElementById('form');
form.addEventListener('submit', handleSubmit);

<form id="form">
<input name="input-data"/>
<input type="hidden" name="action" id="action" value=""/>
<button type="submit" name="action" value="first">Submit</button>
<button type="submit" name="action" value="second">Another Submit</button>
</form>

跨浏览器解决方案

function handleSubmit(event) {
const formData = new FormData();
formData.append("input-data", document.getElementById("input-data").value)
formData.append(event.name, event.value);
for (var entry of formData) {
console.log(entry[0] + ' => ' + entry[1]);
}
}

<form id="form">
<input id="input-data"/>
<button type="button" name="action" value="first" onclick="handleSubmit(this)">Submit</button>
<button type="button" name="action2" value="second" onclick="handleSubmit(this)">Another Submit</button>
</form>

Answer 2

我不认为这可以使用FormData，

你必须自己编码，类似于

const MyForm = document.getElementById('my-form')
var lastClick = null
MyForm.onclick=evt=>
{
lastClick = evt.target.matches('button[type=submit]') 
? evt.target.name 
: null
}
MyForm.onsubmit=evt=>
{
evt.preventDefault()
console.clear()
console.log ( 'submit by', lastClick) 
let formData = new FormData(MyForm);
for (let pair of formData.entries())
{
console.log(pair[0],' ==> ',pair[1])
}
}

<form id="my-form">
<input name="input-data"/>
<button type="submit" name="first">Submit</button>
<button type="submit" name="second">Another Submit</button>
</form>