顯示裝載機MVC

提交我現在有一個登錄表單顯示如下：顯示裝載機MVC

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

沒有運氣

來源

2014-11-25 jbutler483

您是否嘗試過在表單提交事件中顯示它？ – filur 2014-11-25 10:08:04

就像@filur建議的一樣，你需要使用「onsubmit」事件 – Th0rndike 2014-11-25 10:14:18

已經嘗試過了，沒有成功。 – jbutler483 2014-11-25 10:15:45

你需要抓住形式的默認行爲，所以你希望它像現在這樣纔不提交：

$('#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'映入既點擊提交按鈕並按下Enter鍵提交。

來源

2014-11-25 10:51:11 Thermatix

這裏有幾個問題，主要的一點是用戶也可以按'輸入'，表單將被提交，完全繞過了這一點。 – jbutler483 2014-11-25 10:59:09

按Enter鍵提交與單擊提交相同，因此它也捕獲按下輸入。我知道它是這樣做的，因爲我將它用於我自己的東西，它可以在沒有任何代碼更改的情況下按下輸入來工作，所以我知道它是有效的 – Thermatix 2014-11-25 11:00:56

我討厭回答我的問題，但爲了使「處理方法」，我不得不使用內嵌代碼：

使用：

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

均會顯示在裝載機，其次是一個警報。

我認爲這裏的問題是加載器被動畫，它本身在實際頁面提交之前顯示時間太長。

來源

2014-11-25 11:25:45 jbutler483

無論何時提交表單，並且您想對常規提交功能進行更改，請使用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元素。

來源

2017-05-19 17:27:52

顯示裝載機MVC

回答

相關問題