Estoy tratando de evitar que un formulario se envíe automáticamente, luego uso JavaScript para reemplazar el formulario con texto que le dice al usuario que el servidor está procesando el formulario, y en la devolución de llamada en mi ruta de 'publicación' en el servidor, el usuario es enviado al página de resultados después de que finalice el procesamiento con información del formulario. Pero antes de que el intervalo pueda aparecer en el HTML, el formulario ya se ha enviado y la página está esperando una respuesta del servidor. Si inserto una función de tiempo de espera, puedo forzar la aparición del elemento span antes de que se envíe el formulario, pero debe haber una mejor manera de hacerlo. Intenté usar async await .then() pero tampoco funcionó. ¿Quizás la carga del intervalo no puede terminar de renderizarse antes de enviar el formulario? - Gracias

HTML y JS :

var proc = async () => {
    var form = document.getElementById('form');
    form.style.display = 'none';
    var span = document.getElementById('testSpan');
    span.style.display = 'block';

    //using this timeout I can get the span element to appear
    //window.setTimeout(() => {
        //document.getElementById('form').submit()
    //}, 500);
}

var btn = document.getElementById('submitBTN');

btn.addEventListener('click', async () => {
    await proc().then(document.getElementById('form').submit());
})
<span style='display : none' id="testSpan">processing...</span>
<form method="POST" action="/submit-form" id="form" onsubmit="event.preventDefault();">
    <input required id="linkInput" type="text" name="name" />
    <input id='submitBTN' type="button" value="Submit"/>
</form>
1
Dillon Meyer 24 feb. 2021 a las 03:38

2 respuestas

La mejor respuesta

A menos que utilice el masaje de fondo de Web Workers, la única solución es insertar una función de tiempo de espera para "forzar la aparición del elemento span antes de que se envíe el formulario". Debido a que "no se procesa nada hasta que regrese de JavaScript", obtuvo su setTimeout comentado correctamente (excepto que 0 milisegundos de espera es mejor que 500).

En cuanto a su función asíncrona, se ejecutará en concordancia con su proceso principal, llamando a su envío y esperando que se complete. Bueno, ese envío matará todo antes, esperando una nueva página.

0
denis hebert 24 feb. 2021 a las 16:25

El uso de async y await no convierte las cosas en promesas. Tendrá que devolver una promesa para usar una promesa.

En su causa, todavía tendrá que usar un tiempo de espera. Al final, no es realmente diferente a simplemente llamar al envío en el tiempo de espera.

var proc = async() => {
  document.body.classList.add("submitting");
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, 500);
  });
}

var btn = document.getElementById('submitBTN');
btn.addEventListener('click', () => {
  proc().then(() => document.getElementById('form').submit());
})
#testSpan,
.submitting form {
  display: none;
}


.submitting #testSpan {
  display: block;
}
<span id="testSpan">processing...</span>
<form method="POST" action="/submit-form" id="form" onsubmit="event.preventDefault();">
  <input required id="linkInput" type="text" name="name" />
  <input id='submitBTN' type="button" value="Submit" />
</form>
0
epascarello 24 feb. 2021 a las 16:39