Necesito agregar algunos datos a un formulario usando FormData para que cuando se envíe el formulario, esta nueva información también se publique, pero no puedo hacer que funcione. Tenga en cuenta que no quiero usar ajax o buscar para enviar formData ya que quiero que la página redirija al usuario a una página diferente cuando haga clic en el botón Enviar.
const myForm = document.querySelector('form'); myForm.addEventListener('submit', (event) => { event.preventDefault(); const formData = new FormData(myForm); formData.append('age', '20'); event.target.submit(); });Como se mencionó en los comentarios, la mejor manera de hacer esto era evitar el evento normal, enviar su propio objeto formData y luego redirigirlo usted mismo.
var form = document.querySelector("form"); form.addEventListener('submit', e => { e.preventDefault() // build up formdata const formData = new FormData(form); formData.append("age", '20'); const request = new XMLHttpRequest(); request.open("POST", "submitform.php"); // redirect on success request.addEventListener('load', function( event ) { window.location.replace('/my-locaiton') }); // Do whatever needed on error request.addEventListener('error', function( event ) { console.log('failed request..') }); request.send(formData); }) <form id="form" action="POST" target="redirect.html"> <input type="text" value="somtext"> <input type="submit"> </form>Si aún desea dejar que el formulario haga el trabajo, puede hacer algo como esto para evitar el evento y luego enviarlo nuevamente. En este caso, deberá agregar elementos ocultos al formulario:
const form = document.getElementById('form') const listener = async (e) => { // prevent default action. e.preventDefault() // only run the listener only once. form.removeListener('submit', listener) // append actual data.. const ageInput = document.createElement('input') ageInput.style.visibility = 'hidden' ageInput.setAttribute('name', 'age') ageInput.setAttribute('value', '20') form.appendChild(ageInput) // dispatch event again! e.target.dispatchEvent(e) } form.addEventListener('submit', listener)