Cuando escucho el evento de submit de un <form> y obtengo los FormData del formulario, por ejemplo, para enviarlo a través de un XHR, faltan los datos del botón de envío:

 <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á x , pero ni y ni submit1 submit2 Pruébalo en un bolígrafo . Me gustaría que contuviera uno de ellos , a saber, el que activó el envío, al igual que los datos que se enviarían a la action .

Podría hacer algo onsubmit , como

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

PERO SubmitEvent.submitter es bastante nuevo, notablemente sin IE, y solo TP de Safari en el momento de escribir este artículo.

¿Hay alguna manera de enviar el envío a FormData sin hacer una solución alternativa como escuchar todos los eventos de clic de las entradas del formulario y crear, por ejemplo, entradas ocultas con sus datos?

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

 document.querySelectorAll('form').forEach(function (form) { // query might miss <button>s without @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) }) }) })