Question

I am building a web application using struts2. I am having a form the user clicks on submit button and I am processing the form and redirecting back to the same jsp page.
I want to add the loading image so as the user can understand the request is being processed.
I tried my way by writing the script after the end of form tag and adding the image inside the form but not able to get it right on submission of form.
I am not using jQuery , so the $.load() is not useful for me.
Please can anyone help me in this.

Thanks in advance

<script type="text/javascript">
    (function(d) {
        alert("in");
        d.getElementById('loginform').onsubmit = function () {
            alert("on submit");
            d.getElementById('submit').style.display = 'block';
            d.getElementById('loading2').style.display = 'block';
        };
    }(document));
</script>

Answer 1

I found a work around to see the loading image. Posting here so that other can be benefited.
I took a gif image and added it inside a div tag with css property display as block.

<div id="loading" style="position:absolute; width:100%; text-align:center; top:200px">
<img src = "images/loading.gif" width="70px" height="70px"/> </div>

Then I have written a javascript function which I call on event onload.In this function I am setting the display property to none.

function stopLoading()
   { 
     document.getElementById('loading').style.display='none';
   }

In my case I am setting display block when I am sending any server request and onload the setting back to display none.

Hope this is helpful for others.