关于表单重复提交的客服端处理及案例

最新推荐文章于 2022-08-10 00:09:02 发布

原创最新推荐文章于 2022-08-10 00:09:02 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#input #button #action #file

Java Web 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种在客户端处理表单重复提交的方法，包括通过弹窗提示和改变提交按钮颜色来实现等待状态反馈。示例中展示了如何在用户尝试再次提交表单时，显示等待提示并禁用提交按钮，确保用户体验与数据一致性。

关于表单重复提交的客户端处理及案例：
弹出提示框的提示：

<script language="javascript">
var checkSubmitFlag=true;
function checkSubmit()
{
  if (true==checkSubmitFlag)
  {
   document.theform.submit();
   checkSubmitFlag=false;
  }
  else
  {
   alert("文件正在上传，请等待！");
  }
}
</script>

将提交按钮颜色改变处理的提示：

<script language="javascript">
var checkSubmitFlag=true;
function checkSubmit()
{
  if (true==checkSubmitFlag)
  {
   document.theform.but.disabled=true;//式按钮变灰的提交
   document.theform.submit();
   checkSubmitFlag=false;
  }
  else
  {
   alert("文件正在上传，请等待！");
  }
}
</script>

<body>
<form ………… name="theform"……>
<input type="button" value="提交" name="but" onClick="checkSubmit();"/>
</form>
</body>
以下是实例：截图
<script language="javascript">
var checkSubmitFlag=true;
function checkSubmit()
{
  if (true==checkSubmitFlag)
  {
   document.theform.but.disabled=true;//式按钮变灰的提交
   document.theform.submit();
   checkSubmitFlag=false;
   document.all.cache.innerHTML="正在上传，耐心等待<img src='images/cache2.gif'/><img src='images/cache2.gif'/><img src='images/cache2.gif'/> ";
  }
}
</script>
<form action="#" method="post" enctype="multipart/form-data" name="theform" >
    <tr>
    <td>标题：</td>
    <td><input type="text" size="60" name="title" id="title" /></td>
    <td id="innert"><font size='1px'>*必填</font></td>
   </tr>
   <tr>
    <td colspan="3"><br/></td>
   </tr>
   <tr>
    <td>文件：</td>
    <td><input type="file" size="50" name="vedeo" /></td>
    <td >*必填</td>
   </tr>
   <tr>
    <td colspan="3"><br/></td>
   </tr>
   <tr>
    <td colspan="3"><br/></td>
   </tr>
   <tr align="center">
    <td colspan="3">
     <input type="button" value="上传" name="but" onClick="checkSubmit();">
     <input type="reset" value="重置">
    </td>
   </tr>
   <tr>
    <td colspan="3" align="center" id="cache"></td>
   </tr>
  </table>
  </form>