Me gustaría mostrar un mensaje de "espera" al usuario después de presionar "enviar" en un formulario. Por ahora, he logrado al menos deshabilitar el botón después de que el usuario hace clic en él, pero ¿cómo puedo mostrar un mensaje/modal "por favor espere" mientras se carga la siguiente página?
Este es mi código:
<input class="btn btn-primary btn-md" id="submit" name="submit" type="submit" value="Next"> $('form').submit(function(){ $(this).children('input[type=submit]').prop('disabled', true); });Para esta respuesta, proporcioné un <div> oculto con el texto "Por favor espere". Esto podría ser cualquier HTML en cualquier estilo que desee. Cuando se hace clic en el botón, se muestra el mensaje de espera y se desactiva el botón de envío. Dado que esto no espera a que se produzcan los cambios en la interfaz de usuario, es posible que el formulario se envíe antes de que el usuario vea el mensaje Espere.
$('form').submit(function(){ $('#waiting').show(); $(this).children('input[type=submit]').prop('disabled', true); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <div>Please submit the form</div> <input class="btn btn-primary btn-md" id="submit" name="submit" type="submit" value="Next"> </form> <div id="waiting" style="display:none">Please wait...</div>Puede crear un div diseñado con display: none; y luego lo muestra mientras activa el envío.
<div style="display: none;" id="please_wait" class="text-center"> <p>Please Wait...</p> </div> $('form').submit(function (e) { $(this).children('input[type=submit]').prop('disabled', true); $('#please_wait').show(); });