处理HTML表单时显示jQuery对话框onSubmit [英] Display jQuery dialog onSubmit while HTML form is processing

问题描述

我有一个HTML表单，允许用户将附件添加到X MB。由于用户的连接速度不尽相同，因此我想显示一个对话框，其中显示了正在处理您的请求，不要离开此页面，当成功提交表单时此对话框会关闭。不是逐字的，而是相似的。表单发布到自身，并使用PHP进行处理。我不是在寻找进度条或任何东西。只是一个友好的警报。我一直在寻找jQuery UI文档，但这些示例显示了需要用户干预才能继续的确认。我只想在处理过程中使用占位符。任何这些或链接表示赞赏。

在此先感谢

解决方案

搜索我能够拼凑出一个不需要任何Ajax的工作解决方案。这里是：

HEAD部分

 <脚本类型= 文本/ JavaScript的 > 
 $（document）.ready（function（）{
 $（＃loading-div-background）。css（{opacity：1.0}）; 
}）; 
 
函数ShowProgressAnimation（）{
 $（＃loading-div-background）。show（）; 
} 
< / script> 
  

CSS

 ＃loading-div-background {
 display：none; 
位置：固定; 
 top：0; 
剩下：0; 
背景：#fff; 
宽度：100％; 
身高：100％; 
} 
 
＃loading-div {
 width：300px; 
 height：150px; 
 background-color：#fff; 
 border：5px solid＃1468b3; 
 text-align：center; 
颜色：＃202020; 
位置：绝对; 
剩下：50％; 
 top：50％; 
 margin-left：-150px; 
 margin-top：-100px; 
 -webkit-border-radius：5px; 
 -moz-border-radius：5px; 
 border-radius：5px; 
行为：url（/ css / pie / PIE.htc）; / * HANDLES IE * / 
} 
  

HTML（截断以说明必要的部分）

 < form id =frm_sendname =frm_sendmethod =postaction =<？php echo $ _SERVER ['PHP_SELF'];？> ENCTYPE = 多部分/格式数据 > 
 //为简洁省略的字段
< input type =submitid =submitname =submitclass =buttononclick =ShowProgressAnimation（）;值= 发送 > 
< / form> 
< div id =loading-div-background> 
< div id =loading-divclass =ui-corner-all> 
< img style =height：32px; width：32px; margin：30px; src =/ images / please_wait.gifalt =正在加载../>< br> PROCESSING。请等待... 
< / div> 
< / div> 
  

最终结果如下所示。

防止用户干扰进程（当然，除非他们点击停止或退出浏览器（显然））。使用Google Code存储库中包含的最新jQuery和jQuery UI库，它可以非常好地工作，并且可以在Chrome，IE，Firefox和Safari中使用。

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

解决方案

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.

这篇关于处理HTML表单时显示jQuery对话框onSubmit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！