Question

我目前有一个登录表单，如下所示：

+----------------------------------+
|                                  |
|           +----------+           |
|           | E:       |           |
|           | P:       |           |
|           | SUBMIT   |           |
|           +----------+           |
|             LOADER               |
|                                  |
+----------------------------------+

表格定义：

 @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post))
      {
        @Html.AntiForgeryToken()
            <form action="" id="test">

我的提交按钮显示如下：

   <div>
       <input type="submit" value="Log in" onclick="OpenSite();" />
       <a>@Html.ActionLink("Forgot your password?","ForgotPassword","Account")</a>
   </div>

装载机：

   <div class="loader" id="myLoader" style="display:none">Loading...</div>

使用'OpenSite'功能：

<script>
    function OpenSite() {

        $('.loader').show();
        $('#openPopup').click();
    };
</script>

如何在提交表单之前强制执行此功能，但是当我按下“Submit”按钮时？

即：

+---------------+
 User Fills form
+---------------+
       ||
       \/
+---------------+
  User Presses 
     submit
+---------------+
       ||
       \/
+---------------+
 Display loader
+---------------+
       ||
       \/
+---------------+
  Display popup
+---------------+ 
       ||
       \/
+---------------+
  Submit form 
  to controller
+---------------+

这意味着在下一页加载时会显示“加载”动画。

如何实现这一目标？

我尝试在函数的开头添加alert("hello world");，然后执行但我的加载器根本没有显示：（

非常感谢任何帮助。

我也尝试过：

$("#test").submit(function (event) {
    $('#myLoader').show();
});

没有运气

Answer 1

您需要捕获表单的默认操作，以便在您希望它之前不提交：

 $('#formid').on('submit',function (e) {
    e.preventDefault() // stops normal submit action
   //make loading div visible, set it to absolute position in middle of page  and just make it display: block; or something
   //do submit action stuff here, i.e. ajax stuff

})

编辑：道歉它不是'click'，而是'submit'，它既可以点击提交，也可以按回车提交。

Answer 2

我讨厌回答我自己的问题，但是为了“解决方法”，我必须使用内联代码：

使用：

<input type="submit" value="Log in" onclick="$('#myLoader').show(); alert('hello');" />

两者都会显示加载程序，然后是警报。

我认为这里的问题是加载器是动画的，它本身在实际页面提交之前显示的时间太长了。

Answer 3

每当提交表单，并且您想要更改正常的提交功能时，请使用onrmatix建议的onSubmit功能。这个问题的诀窍在于你希望它除了提交其他东西之外还要提交，所以删除内联的东西并尝试这个：

$('#formID').on('submit',function (e) {
    e.preventDefault() // stops normal submit action

   $('#myLoader').show();
   // anything else you want to do while still on this page

   $('#formID').submit();
});

您可能也会快速遇到提交表单的“问题”，以致人眼无法看到.show（）事件。如果您想测试此代码是否有效，请注释$('#formID').submit();您应该会看到“正在加载...”。一旦你确认它正在工作，取消注释form.submit行，你应该是金色的。

另一项完整性检查：确保此代码存在于页面底部的<head>或<script>标记中。这可以确保JS看到此函数附加的DOM元素。

在MVC中提交表单之前显示加载器

3 个答案: