Debugging two buttons for one form

Question

I've looked at this question and this question as well, but the solution of using the <button> tag has not worked for me.

I think it's because I'm using FormData, but I thought that FormData would pick up on all the submitted keys and values.

Here's a simple JSFiddle for what I'm trying to do, but it's not working. I expect to see the first and second values show up in the FormData object, but only the input-data shows up.

I need to be able to determine which button was pressed to submit the form.

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 not collect value of buttons. You can set value for a hidden input like this:

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>

Cross Browser Solution

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>