表单提交时等待 div 无法显示答案

【问题标题】：Waiting Div On Form Submission Fail To Display表单提交时等待 div 无法显示
【发布时间】：2014-09-23 11:06:53
【问题描述】：

我有一个简单的任务，但没有成功。我试图在表单提交上显示 div 等待但失败...... 任务如下：

<script type="text/javascript">
    function ShowLoading(e) 
    {
        document.getElementById('mkdd').style.display='';
    }        

</script>

CSS：

#mkdd
{

 display:none;
 position:fixed;
 top:0px;
 width:100%;
 height:700px;
 background-color:DarkGray;
 opacity:0.5;

}

页面设计：

<form id="form1" runat="server"  onsubmit="ShowLoading()">
<table><tr><td>
   <div id="mkdd">
       <div id="mkd" style="width:100px; height:100px;position: fixed; top: 30%; left: 40%; z-index: 5000;">
           <img width="30" height="30" src="Img/ajax-loader.gif" />
       </div>

   </div>
</td></tr></table>

</form>

它的解决方案是什么？我哪里错了？

【问题讨论】：

首先你的 html 搞砸了。修复表格/行/单元格标签。我认为您应该首先阅读教程Here，因为您的代码缺少关键逻辑。
你的错误信息是什么？
您是否通过 ajax 调用来提交表单？或者您是否只是试图显示加载并发布您的表单，因为它的立场只会发回导致页面重新加载，这就是您的加载 div 不显示的原因（除了无效的表格 html）。您还应该尝试将显示设置为block
@Banana，这是一个打字错误...
@Dejan.S，没有错误，问题是“mkdd” div 在提交表单时没有显示...

标签： jquery css asp.net

【解决方案1】：

JS：

function ShowLoading(e) {
    document.getElementById('mkdd').style.display = 'block';
}

CSS：

#mkdd {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: DarkGray;
    opacity: 0.5;
}

HTML（大致）：

<form id="form1" runat="server" onsubmit="ShowLoading()">
    <table>
        <tr>
            <td>
               <div id="mkd">
                    <img width="30" height="30" src="Img/ajax-loader.gif" />
                </div>
            </td>
        </tr>
    </table>
</form>

<div id="mkdd"></div>

这应该在表单提交时显示深灰色叠加层。但是，由于看起来您正在尝试显示某种 AJAX 预加载器，因此您的 javascript 缺少相当多的逻辑。

如果您使用的是 jQuery： http://api.jquery.com/jquery.ajax/

如果没有，你可以参考这个帖子： Simple ajax form using javascript no jQuery

【讨论】：

【解决方案2】：

尝试将显示设置为阻止而不是将其留空：

<script type="text/javascript">
    function ShowLoading(e) 
    {
        document.getElementById('mkdd').style.display='block';
    }        
</script>

通过将其留空，您将其恢复为样式表中指定的默认值，在本例中为无。

供参考：What does style.display = '' actually do?

【讨论】：

由于我的分数低，我无法投票给你，但你的回答也是正确的......它有效，谢谢......
没问题，很高兴我能帮上忙。