Question

我正在创建一个MVC Web应用程序，用户填写表单，然后在单击“提交”按钮后，将生成包含用户信息的PDF视图。我使用的PDF生成器需要很长时间才能工作，因此当用户单击“提交”并等待生成下一个视图时，我希望显示“请等待”模式。

模式的目的是阻止用户多次单击提交按钮，并让用户知道他们的表单已经完成并且应用程序仍在运行。

我尝试了以下代码，但模式未显示：

HTML

<div class="form-horizontal">


   <!--the entire form...-->


   <div>
      <input type="submit" value="Submit" class="btn btn-default btn-lg" id="submitButton" />
   </div>


   <!-- Modal -->
   <div class="modal fade" id="waitingModal" role="dialog">
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
               </div>
               <div class="modal-body">
                   <h2 class="modal-realtitle">Thank You for Your Patience!</h2>
               </div>
            </div>
        </div>
    </div>

 </div>

的jQuery

$(document).ready(function () {

    $(".form-horizontal").submit(function () {
        $('#waitingModal').show();
    });
});

表单仍在提交，但模式未显示。我也尝试过这个代码用于模态：

HTML

<div>
    <input type="submit" value="Submit" class="btn btn-default btn-lg" data-toggle="modal" data-target="#waitingModal"  data-backdrop="static" data-keyboard="false" />
</div>

<div class="modal fade" id="waitingModal" role="dialog">
    <div class="modal-dialog">
         <div class="modal-content">
              <div class="modal-header"></div>
              <div class="modal-body">
                   <h2 class="modal-realtitle">Thank You for Your Patience!</h2>
              </div>
         </div>
    </div>
</div>

上面的代码获取要显示的模态，但提交按钮不再执行它应该执行的操作。换句话说，模态显示但表单不提交。

这是我第一次使用模态并尝试实现这一目标。是否有可能使第一部分HTML与一些jQuery一起使用？

单击提交按钮后显示模式/确认页面加载时

0 个答案: