为一种形式调试两个按钮

Question

我看过this question和this question as well，但是使用<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

非常简单。这里的工作示例：

function handleSubmit(event) {
  event.preventDefault(); // don't have the browser refresh on submit

  const formData = new FormData();

  for (var target of event.target) {
      console.log(target.name + ' => ' + target.value);

      formData.append(target.name, target.value);
  }

  // Optional:
  // If you need to get values from 'formData', just do:
  // for (var entry of formData) {
  //     console.log(entry);
  // }
}

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="action2" value="second">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>

Answer 3

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>