Me gustaría enviar un formulario con Vanilla JS, pero aún desencadenar eventos de envío. Básicamente lo mismo que presionar el botón "enviar".
HTMLFormElement.submit() omite el evento "enviar", por lo que no funciona para mí.
HTMLFormElement.requestSubmit() parece que haría lo que quiero, pero el soporte del navegador es muy pobre. Me gustaría la compatibilidad con Chrome/Safari/Firefox/Edge.
Para enviar un formulario mediante programación y aun así desencadenar un evento de "enviar", además de usar .requestSubmit() , sería usar el método .click() en el botón "enviar". En el siguiente ejemplo se encuentran los siguientes:
Un <form> que publicará sus datos en un servidor de prueba en vivo. La respuesta del servidor de prueba se mostrará en un <frame> ubicado después del <form> .
Un <button> fuera del <form> y tampoco tiene ningún atributo de form asignado. Este botón está aislado del <form> pero aun así desencadenará un evento "enviar" indirectamente ya que está registrado en el evento "hacer clic" y el controlador de eventos hará clic en el botón "enviar" mediante programación.
Tenga en cuenta que el <button> no es necesario para usar el método .click() , se puede invocar por otros medios como cualquier otro método o función.
Haga clic en el botón Activar
<button class='trigger'>Trigger</button> const trigger = document.querySelector('.trigger'); trigger.onclick = e => document.querySelector('form button').click(); .trigger { vertical-align: top } <form id='UI' action='https://httpbin.org/post' method='POST' target='response'> <fieldset> <legend>Programmatically Submit a Form</legend> <input name='test' value='TEST'> <button name='send'>Send</button> </fieldset> </form> <hr> <button class='trigger'>Trigger</button> <iframe name='response'></iframe>