Falta el valor de submit en FormData: ¿se obtiene sin SubmitEvent.submitter, tal vez?

Cuando escucho el evento “submit” de un formulario <form> y obtengo los datos del formulario con FormData, por ejemplo, para enviarlos a través de una solicitud XHR, los datos del botón de envío no están presentes:

<form>
  <input type="text" name="x" value="foo" />
  <input type="hidden" name="y" value="bar" />
  <button type="submit" name="submit1" value="bar">submit1</button>
  <input type="submit" name="submit2" value="submit2" />
</form>

FormData tendrá los valores de x e y, pero no los de submit1 o submit2. Pruébalo en un Pen. Debería Me gustaría que contenga uno de ellos, específicamente el que desencadenó el envío, similar a los datos que se enviarían a action.

Podría hacer algo usando onsubmit, así:

form.onsubmit = function (evt) {
  var fd = new FormData(form);
  fd.append(evt.submitter.name, evt.submitter.value);
  // procesar fd...
});

PERO SubmitEvent.submitter es bastante nuevo, especialmente no compatible con IE y solo es compatible con Safari TP al momento de escribir esto.

¿Existe alguna forma de incluir el botón de envío en FormData sin hacer un truco como escuchar los eventos de clic de todos los inputs del formulario y crear, por ejemplo, inputs ocultos con sus datos?

Después de la respuesta aceptada, implementé un “polyfill”:

document.querySelectorAll('form').forEach(function (form) {
  // es posible que la consulta no incluya los botones sin el atributo @type
  form.querySelectorAll('[type="submit"]').forEach(function (submit) {
    submit.addEventListener('click', function () {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', this.name);
      input.setAttribute('value', this.value);
      this.form.appendChild(input);
    });
  });
});