Show jQuery onSubmit dialog when processing HTML form

Question

I have an HTML form that allows the user to add an attachment up to X MB. As connection speeds change for users, I would like to show a dialog that says something like the line "Your request is being processed. Do not move away from this page. This dialog will close when the form is submitted successfully." Not literally, but it seems. The form submits itself and is processed using PHP. I'm not looking for an indicator of progress or anything else. Just a friendly warning. I looked at the jQuery UI documentation, but the examples show confirmation, which requires user intervention to continue. I just want to fill in the space when processing. Any this or links are appreciated.

Thanks at Advance

Answer 1

So, after some mastering and hours of searching, I was able to put together a working solution that does not require Ajax. Here he is:

HEAD Section

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

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 */ } 

HTML (Truncated to illustrate the 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 is as follows.

It prevents user intervention in the process (unless, of course, they stop or leave the browser (obviously)). It works very beautifully, cleanly and works through Chrome, IE, Firefox and Safari, using the latest jQuery and jQuery UI libraries included in the Google Code repositories.

Answer 2

you can use jquery ui modal dialog and hide the close button

http://api.jqueryui.com/dialog/#entry-longdesc

You can also use ajax to submit your form, and then you can open the dialog box before starting the request, and in the success function close the dialog using

 $("#myDialog").dialog("close"); 

. I'm not sure how to check if the message is completed in PHP, but if there is a way to do this, you can do it there.

Answer 3

I am using pnotify. This is a jQuery plugin that is really lightweight and super simple. It displays simple non-intrusive dialogs. Check here .

Update

Here is a small example of how I handle user notification of success / failure with pNotify. I have pNotify updates wrapped in their own functions, so I don’t need to repeat the code with every request, but I think this should demonstrate how you can use it to notify the user.

 notify = $.pnotify({ title: 'Working', text: 'Updating entry, please wait...', type: 'info', hide: false }); $.post('ajax.php', meta, function (data) { if (data && data.status === 1) { notify.pnotify({ title: 'Success', text: 'System successfully updated.', type: 'success', delay: 1500, hide: true }); } else { notify.pnotify({ title: 'Error', text: 'There was an error updating the system.', type: 'error', delay: 4000, hide: true }); } }, "json");