I'd like to show a "please wait" message to the user after hitting "submit" on a form. For now I've managed to at least disable the button after the user clicks it, but how can I display a "please wait" message / modal while the next page loads?
This is my code:
<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);
});
For this answer, I have provided a hidden <div> with the "Please Wait" text. This could be any HTML in any style you want. When the button is clicked, the wait message is displayed and the submit button is disabled. Since this does not wait for the UI changes to happen, it is possible that the form will submit before the user sees the Please Wait message.
$('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>You can create a div styled with display: none; and then you show it while triggering the submission.
<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();
});