Waiting Div On Form Submission Fail To Display

Question

I have a simple task but fail to success. I am trying to show div on form submission for waiting but fail… Task as below:

<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;

}

Page Design:

<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>

What is the solution of it?. Where do I wrong?.

well first of all your html is messed up. fix the table/row/cell tags. i think you should first read the tutorials [Here](http://www.w3schools.com/) as your code misses key logic. — Banana, Jul 31 '14 at 13:26
Are you doing an ajax call to submit your form? Or are you just trying to show the loading and post your form because the way it stands it will just post back causing the page to reload which is why your loading div doesn't show up (apart from the invalid table html). You should also try setting the display to `block` — Pete, Jul 31 '14 at 13:32
@Dejan.S, There no error the problem is "mkdd" div is not showing on submission of form... — user2741987, Jul 31 '14 at 13:42
I have edited my previous post now you can refer it. there are no error but div is not showing on post back of page or submission of page.... it is the actual problem. I trying to show the div on form submission and will hide automatically after page submission process — user2741987, Jul 31 '14 at 13:45

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

Try setting display to block instead of leaving it empty:

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

By leaving it empty you are reverting it back to the default specified in the stylesheet which in this case is none.

For reference: What does style.display = '' actually do?

edited May 23 '17 at 12:29

Community

1
1

answered Jul 31 '14 at 13:48

Hidden Hobbes

13,893
3
38
64

I am unable to up vote you due to my low points but your answer is also wright.... It's works, Thanks... – user2741987 Jul 31 '14 at 15:45

score 0 · Accepted Answer · edited May 23 '17 at 12:04

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 (roughly):

<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>

This should display the dark gray overlay while the form is submitting. However, since it looks like you are trying to show some kind of AJAX preloader, your javascript is missing quite a bit of logic.

If you're using jQuery: http://api.jquery.com/jquery.ajax/

If not, you might refer to this thread: Simple ajax form using javascript no jQuery

Waiting Div On Form Submission Fail To Display

2 Answers2