如何在提交表单时添加加载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

回答

相关问题