如何在提交表單時添加加載gif

目前沒有任何關於此主題的問題似乎對我有幫助，我對此很新，我需要一些幫助。目前我有一個表單，並在提交（目前沒有任何驗證）它顯示一個隱藏的div使用此功能。如何在提交表單時添加加載gif

function showDiv() { 
document.getElementById('showme').style.display = "block"; 
}

我想添加一個加載gif，顯示約2秒後點擊按鈕，然後進行顯示隱藏的div。我的形式是如圖所示 -

<form action="" method="POST" id="hello" onsubmit="showDiv(); return false;">

登錄按鈕就在這裏

<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">

來源

2017-08-03 Ashley Blyth

你可以使用的setTimeout ...修改'CSS'顯示加載GIF，運行setTimeout和setTimeout函數內部都會刪除/隱藏gif並顯示輸入....'setTimeout（function（）{ //隱藏gif＆show input}，2000）;'如果該按鈕用於提交表單，則您不需要'onclick'屬性，您的表單上已經有'onsubmit'屬性.. – NewToJS

我該如何去展示和隱藏函數中的gif，你能幫助嗎？ –

那麼這將取決於你目前在你的源代碼中的gif。包括所有相關的源代碼，我相信你會發現人們可以更具體地回答問題。在這個時候你還沒有包含所有相關的源代碼... gif ....隱藏的輸入... StackOverflow將允許你創建一個片段，這將允許其他人運行你的源代碼在這裏，我建議你在你的問題中添加一個。 – NewToJS

function showDiv() { 
 
    document.getElementById('Login').style.display = "none"; 
 
    document.getElementById('loadingGif').style.display = "block"; 
 
    setTimeout(function() { 
 
    document.getElementById('loadingGif').style.display = "none"; 
 
    document.getElementById('showme').style.display = "block"; 
 
    },2000); 
 
    
 
}

<div id="showme" style="display:none;">You are signed in now.</div> 
 
    <div id="loadingGif" style="display:none"><img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"></div> 
 
    <form action="#" method="POST" id="hello" onsubmit="return false;"> 
 
     <input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()"> 
 
    </form>

來源

2017-08-03 23:04:35 Aydin4ik

這工作得很好，非常感謝你，你知道我將如何去取代登錄按鈕與這個gif直到div顯示？ –

您可以在單擊按鈕時隱藏該按鈕，它會給您以後的效果。我調整了上述內容，嘗試再次運行它。 – Aydin4ik

工作很好！非常感謝。 –

的問題是，你在你的代碼，當你提交表單，從而抵消了提交執行有return false ，所以你的函數不會被調用。

您不應該首先使用內嵌HTML事件屬性，並單獨執行所有JavaScript。 Here's why.

此外，如果你沒有真正捕獲數據，任何地點發送它，那麼你應該不會有form，一個submit按鈕或處理submit事件，你只需要一個普通button及其click事件。

此外，請勿將您的表格命名爲submit，因爲這會阻止您以編程方式調用其上的submit()方法。

這裏是一個應該是什麼：

// Get references to the DOM elements you'll need: 
 
var button = document.getElementById('Login'); 
 
var special = document.getElementById("special"); 
 
var pleaseWait = document.querySelector(".hidden"); 
 

 
// Set up your event handlers in JavaScript, not with HTML attributes 
 
button.addEventListener("click", function(evt){ 
 
    
 
    // Show the message by removing the class that hides it: 
 
    pleaseWait.classList.remove("hidden"); 
 
    
 
    // Wait 2 seconds and then run a function that re-hides the message and 
 
    // submits the form. 
 
    setTimeout(function(){ 
 
     pleaseWait.classList.add("hidden"); 
 
     special.classList.remove("hidden"); 
 
    }, 2000); 
 
});

.hidden { 
 
    display:none; 
 
} 
 

 
.img { 
 
    width:50%; 
 
    position:absolute; 
 
}

<form action="#" method="POST" id="myForm"> 
 

 
    <input class="btn_green_white_innerfade btn_medium" 
 
     type="button" name="Login" id="Login" value="Sign in" 
 
     width="104" height="25" border="0" tabindex="5"> 
 
      
 
    <img class="hidden img" src="https://www.cluecon.com/theme/img/pleasewait.gif"> 
 
    <div class="hidden" id="special">Here I am</div> 
 
      
 
</form>

來源

2017-08-03 22:54:33

如何在提交表單時添加加載gif

回答

相關問題