ajax 禁用按钮防止重复提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="{$actionUrl}fuyuandian/index.html" method="post" id="form">
<p class="fi_top">填写信息预约</p>
<ul class="fill_ui">
<li>
<div class="l">缘主姓名</div>
<div class="r"><input type="text" name="name" placeholder="请输入您的姓名" id="username"/></div>
</li>
<li>
<div class="l">联系电话</div>
<div class="r"><input type="text" name="phonenumber" placeholder="请输入电话号码" id="phone"/></div>
</li>
<li>
<div class="l">开光需求</div>
<div class="r"><textarea name="kaiguangxuqiu" placeholder="请输入您的开光需求" id="txtarea"></textarea></div>
</li>
</ul>
<input type="button" value="确认预约" class="fi_btn" id="formBtn"/>
<input type="hidden" name="form_id" value="7">
</form>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#formBtn").click(function () {
var regName =/^[\u4e00-\u9fa5]{2,4}$/;
var regPhone=/^1[0-9]{10}$/;
var xm =$('#username').val();
var phone =$('#phone').val();
var txtarea =$('#txtarea').val();
if(xm==''){
alert('请输入姓名');
return false;
}
if(!regName.test(xm)){
alert('请输入汉字');
return false;
}
if (phone=='') {
alert('请输入手机号码');
return false;
}
if(!regPhone.test(phone)){
alert('请输入正确的手机号码');
return false;
}
if (txtarea=='') {
alert('请输入开光需求')
return false;
}
var postUrl = $("#form").attr('action');
$.ajax({
url: postUrl,
data: $("#form").serialize(),
type: 'post',
dataType: 'json',
beforeSend: function () {
// 禁用按钮防止重复提交
$("#formBtn").attr({ disabled: "disabled" });
$("#formBtn").val('正在提交中...')
},
success: function (res) {
if (res.code == '1') {
alert('您已预约成功,请保持电话畅通');
$("#formBtn").val('已成功提交')
} else {
alert(res.msg);
$("#formBtn").removeAttr("disabled");
}
}
});
});
});
</script>
</body>
</html>
ajax 禁用按钮防止重复提交的更多相关文章
- asp.net 禁用按钮防止重复提交
按钮设置 1.OnClientClick属性为”this.disabled=true;“ 2.UseSubmitBehavior属性为”false“ 举例如下: <asp:Button ID=& ...
- A标签/按钮防止重复提交&页面Loading制作
[实现原理] 防止重复提交与页面的提交时的Loading设置,均是在提交,但是尚未处理完成进行的操作,且提交为异步提交(同步提交不需要考虑).因此,其实现原理是在点击按钮或A标签时,将按钮/A标签置为 ...
- 关于Asp.Net中避免用户连续多次点击按钮,重复提交表单的处理
Web页面中经常碰到这类问题,就是客户端多次点击一个按钮或者链接,导致程序出现不可预知的麻烦. 客户就是上帝,他们也不是有意要给你的系统造成破坏,这么做的原因很大一部分是因为网络慢,点击一个操作之后, ...
- 防止按钮button重复提交,点击后失效,10秒后恢复
<script type="text/javascript"> $(function () {//页面完全加载完后执行 /*防止重复提交 10秒后恢复*/ var is ...
- js按钮 防重复提交
给html 按钮加id属性 例: <button id="addBtn" onclinck="check()"> </button&g ...
- Ajax beforeSend和complete 方法与防止重复提交
$.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle t ...
- jQuery的$ .ajax防止重复提交的方法
没啥说的直接贴代码,很简单: 第一种方式:的onclick点击事件类型 <SCRIPT> function member_del(obj,id){ var lock = false; // ...
- js禁止重复提交方法
beforeSend: function () { // 禁用按钮防止重复提交 $("#fileForm a[class='btn blue_btn']").removeAttr( ...
- java web解决表单重复提交问题
我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...
随机推荐
- Andriod实现刮刮卡的效果
思想: 将一个View设计成多层,内层(包含中奖信息)和外层(用于刮奖),外层的图层用Canvas与一个Bitmap关联,用这个关联的Bitmap来处理手势的滑动.类似于刮奖的动作. 使用paint. ...
- 在项目开发中使用Git版本号控制工具以提高效率
安装Git(linux centos平台) 源代码方式安装 1.装依赖 $ yum install curl-devel expat-devel gettext-devel openssl-devel ...
- 【转】Andorid获取状态栏高度
在应用开发中,有时我们需要用代码计算布局的高度,可能需要减去状态栏(status bar)的高度.状态栏高度定义在Android系统尺寸资源中status_bar_height,但这并不是公开可直接使 ...
- [NOIP2003普及组]麦森数(快速幂+高精度)
[NOIP2003普及组]麦森数(快速幂+高精度) Description 形如2^P-1的素数称为麦森数,这时P一定也是个素数.但反过来不一定,即如果P是个素数,2^P-1不一定也是素数.到1998 ...
- PCB genesis连孔加除毛刺孔(圆孔与槽孔)实现方法(二)
一.为什么 连孔加除毛刺孔 原因是 PCB板材中含有玻璃纤维, 毛刺产生位置在于2个孔相交位置,由于此处钻刀受力不均导致纤维切削不断形成毛刺 ,为了解决这个问题:在钻完2个连孔后,在相交处再钻一个孔, ...
- E20170618-hm
sentinel n. 岗哨,哨兵; node n. 节点; (计算机网络的) 节点; [医] 结节; 植物的节; traverse n. 穿过; 横贯,横切; 横木; [建] 横梁; vt ...
- 【Kafka】《Kafka权威指南》——从Kafka读取数据
应用程序使用 KafkaConsumer向 Kafka 订阅主题,并从订阅的主题上接收消息 . 从 Kafka 读取数据不同于从其他悄息系统读取数据,它涉及一些独特的概念和想法.如果不先理解 这些概念 ...
- IOS上微信在输入框弹出键盘后,页面不恢复,下方有留白,有弹窗弹出时页面内容感应区域错位
问题说明: ios中,键盘的弹起,页面会往上挪动,使输入框展示在页面中间,键盘隐藏页面会下挪恢复原状. 在微信移动端,ios页面不恢复,下方有留白. 收起键盘的瞬间,如果有弹窗弹出,此时时页面内容应区 ...
- 为什么选择Android Studio 而是 Eclipse
Android Studio 现在的版本已经比较稳定了,刚出来时也是各种BUG,自己用了下,摸索了一天,感觉挺好的. 优点之一:代码提示和搜索功能非常强大,非常智能. 1).自定义theme有个名字叫 ...
- 关于vector.size()和string.length() 的返回类型 size_type
今天写循环的时候碰到一个问题,发现:string.length()返回的类型是size_type.它是unsigned 类型.string::size_type它在不同的机器上,长度是可以不同的,并非 ...