html怎么防止表单重复提交表单,8.10　防止表单重复提交

8.10　防止表单重复提交

οnclick="this.disabled = true;"/>

特别是在脚本需要很长时间分析表单数据时，用户很可能会再次提交表单来尝试加快速度。然而，在网上购物、信用卡支付和其他重要的交易中，可能涉及大笔资金。因此，网页本身应当努力避免表单被重复提交。

上面的代码(在本主题相关的下载文件prevent.html里)就是这样实现的：在单击了提交按钮后，按钮的disabled属性被设置为true，使得按钮不能再被点击(当JavaScript启用时)。图8-5展示了浏览器中的结果：按钮变灰。

(点击查看大图)图8-5　按钮不能被点击两次

上面的代码和代码清单8-10都是提交表单数据到名为delay.php的PHP脚本，它在等待5秒后才发送数据。这样做考虑到了网络连接缓慢或服务器缓慢的情况。这是本节语句的主要用意。

还有一种方法是通过维护按钮状态，判断是否单击了按钮，如代码清单8-10所示。

代码清单8-10　通过维护状态变量来防止表单被重复提交(prevent- status.html)

varsubmitted =false;

functioncheckform(f) {

if(submitted) {

window.alert("Form has already been

?submitted!");

returnfalse;

}else{

submitted =true;

returntrue;

}

οnsubmit="return checkform(this);">

警告尽管这个语句非常方便，你需要意识到有时服务器会在没有预兆的情况下关闭到客户端的连接(反之亦然)。然后数据传输就中止了，但JavaScript代码无法得知这些。其结果是按钮不能被点击两次(如预期的那样)，却未能有效地发送数据。这样用户就需要重新载入表单来重新提交数据。

【责任编辑：云霞 TEL：(010)68476606】

html怎么防止表单重复提交表单,8.10　防止表单重复提交相关推荐

form表单用js提前执行函数若不成功则不提交_面试必会的重复提交 8 种解决方案！...
重复提交看似是一个小儿科的问题,但却存在好几种变种用法.在面试中回答的好,说不定会有意想不到的收获!现把这 8 种解决方案分享给大家! 1.什么是幂等在我们编程中常见幂等 select查询天然幂等 ...
php mysql 重复提交数据_如何真正解决表单重复提交问题php代码
如何真正解决表单重复提交问题php代码过去一切时代的精华尽在书中.以下是小编为大家搜索整理的如何真正解决表单重复提交问题php代码,希望能给大家带来帮助!更多精彩内容请及时关注我们应届毕业生考试网! ...
Form表单提交按钮图片IE6下背景透明（js提交）
Form表单提交按钮图片IE6下背景透明(js提交) 我们知道光png图片在IE6下面透明方法很多,网上也很多,但是我今天遇到了个难题:form表单提交按钮png图片要求背景透明.我弄了半天,转个思 ...
php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
asp.net接受表单验证格式后再提交数据_如何解析 el-form-renderer 表单渲染器1.14.0...
DEEPEXI 大前端常人道,一入开发深似海,技术学习无止境.在新技术层出不穷的前端开发领域,有一群身怀绝技的开发,他们在钻研前沿技术的同时,也不忘分享他们的成果,回馈社区.下面,就由小水滴带大家看 ...
Vant-UI 表单组件（Field组件）：验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
onsubmit=“return check() 给form加onsubmit 验证所有表单后再提交，可以用返回false 来阻止submit提交
onsubmit="return check() 给form加onsubmit 验证所有表单后再提交,可以用返回false 来阻止submit提交<form class="f ...
简单表单提交php教程,php教程之表单提交实例
一个超简单的初学者用的php教程之表单提交实例有需要的朋友参考一下. 下面我们将创建一个复杂的表单,代码如下所示. 实例代码如下: 姓名: 密码: 年龄: 16">小于16 16-30 ...
html表单提交按钮代码,JavaScript在form表单中使用button按钮实现submit提交方法
submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. ...
微信小程序表单数据提交服务器,微信小程序防走弯路之：提交表单获取表单数据...
1.简历一个简单的表单,点击'提交'按钮时,提交表单内容 2. 以姓名框为例 .wxml #调用formSubmit函数提交 class为 ...

html怎么防止表单重复提交表单,8.10　防止表单重复提交

html怎么防止表单重复提交表单,8.10　防止表单重复提交相关推荐

最新文章

热门文章

html怎么防止表单重复提交表单,8.10 防止表单重复提交

html怎么防止表单重复提交表单,8.10 防止表单重复提交相关推荐

最新文章

热门文章

html怎么防止表单重复提交表单,8.10　防止表单重复提交

html怎么防止表单重复提交表单,8.10　防止表单重复提交相关推荐