以 HTML 格式提交表單后如何向用戶顯示“請稍候”消息

Question

在表單上點擊“提交”后，我想向用戶顯示“請稍候”消息。 現在，我已經設法在用戶單擊后至少禁用了該按鈕，但是如何在加載下一頁時顯示“請稍候”消息/模式？

這是我的代碼：

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

Answer 1

對於這個答案，我提供了一個帶有“請稍候”文本的隱藏<div> 。 這可以是您想要的任何樣式的任何 HTML。 單擊該按鈕時，將顯示等待消息並禁用提交按鈕。 由於這不會等待 UI 更改發生，因此表單可能會在用戶看到請等待消息之前提交。

 $('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>

Answer 2

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

將重命名提交按鈕。

根據您的評論創建了一個答案，謝謝！

Answer 3

您可以創建一個帶有display: none;樣式的div display: none; 然后在觸發提交時顯示它。

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