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);
 });

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

$(this).children('input[type=submit]').attr('value', 'Please wait...');

Will rename the submit button.

Created an answer because of your comment, thanks!

CodePudding user response：

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();
});