Display jQuery dialog onSubmit while HTML form is processing

Question

I have an HTML form that allows a user to add an attachment up to X MB. Because connection speeds for users vary, I would like to show a dialog that says something along the lines of "Your request is processing. Do not navigate away from this page. This dialog will close when the form is submitted successfully". Not verbatim but similar. The form posts to itself and is processed with PHP. I am not looking for a progress bar or anything. Just a friendly alert. I have been looking at the jQuery UI documentation but the examples show a confirmation which requires user intervention to continue. I just want a placeholder while the processing is happening. Any this or links are appreciated.

Thanks in Advance

Answer 1

So after some tinkering and hours of searching I was able to piece together a working solution that doesn't require any Ajax. Here it is:

The HEAD Section

<script type="text/javascript">
    $(document).ready(function (){
        $("#loading-div-background").css({ opacity: 1.0 });
    });

    function ShowProgressAnimation(){
        $("#loading-div-background").show();
    }
</script>

The CSS

#loading-div-background{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
}

#loading-div{
    width: 300px;
    height: 150px;
    background-color: #fff;
    border: 5px solid #1468b3;
    text-align: center;
    color: #202020;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    behavior: url("/css/pie/PIE.htc"); /* HANDLES IE */
}

The HTML (Truncated to illustrate necessary parts)

<form id="frm_send" name="frm_send" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
// Fields omitted for brevity
<input type="submit" id="submit" name="submit" class="button" onclick="ShowProgressAnimation();" value="Send">
</form>
<div id="loading-div-background">
  <div id="loading-div" class="ui-corner-all">
    <img style="height:32px;width:32px;margin:30px;" src="/images/please_wait.gif" alt="Loading.."/><br>PROCESSING. PLEASE WAIT...
  </div>
</div>

And the end result looks like this.

Prevents the user from interfering with the process (unless of course they click stop or exit the browser (obviously)). Works very nicely, it's clean and works across Chrome, IE, Firefox, and Safari using the latest jQuery and jQuery UI libraries included from Google Code repositories.