<!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 禁用按钮防止重复提交的更多相关文章

  1. asp.net 禁用按钮防止重复提交

    按钮设置 1.OnClientClick属性为”this.disabled=true;“ 2.UseSubmitBehavior属性为”false“ 举例如下: <asp:Button ID=& ...

  2. A标签/按钮防止重复提交&页面Loading制作

    [实现原理] 防止重复提交与页面的提交时的Loading设置,均是在提交,但是尚未处理完成进行的操作,且提交为异步提交(同步提交不需要考虑).因此,其实现原理是在点击按钮或A标签时,将按钮/A标签置为 ...

  3. 关于Asp.Net中避免用户连续多次点击按钮，重复提交表单的处理

    Web页面中经常碰到这类问题,就是客户端多次点击一个按钮或者链接,导致程序出现不可预知的麻烦. 客户就是上帝,他们也不是有意要给你的系统造成破坏,这么做的原因很大一部分是因为网络慢,点击一个操作之后, ...

  4. 防止按钮button重复提交，点击后失效，10秒后恢复

    <script type="text/javascript"> $(function () {//页面完全加载完后执行 /*防止重复提交 10秒后恢复*/ var is ...

  5. js按钮 防重复提交

    给html 按钮加id属性   例: <button id="addBtn"  onclinck="check()">  </button&g ...

  6. Ajax beforeSend和complete 方法与防止重复提交

    $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle t ...

  7. jQuery的$ .ajax防止重复提交的方法

    没啥说的直接贴代码,很简单: 第一种方式:的onclick点击事件类型 <SCRIPT> function member_del(obj,id){ var lock = false; // ...

  8. js禁止重复提交方法

    beforeSend: function () { // 禁用按钮防止重复提交 $("#fileForm a[class='btn blue_btn']").removeAttr( ...

  9. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

随机推荐

  1. Linux网络编程：UDP实现可靠的文件传输

    我们知道,用TCP实现文件传输很简单.相对于TCP,因为UDP是面向无连接.不可靠的传输协议,所以我们需要考虑丢包和后发先至(包的顺序)的问题,所以我们想要实现UDP传输文件,则需要解决这两个问题.方 ...

  2. Live555研究之中的一个 源码编译

                                                Live555研究之中的一个 源代码编译 Live555 是一个为流媒体提供解决方式的跨平台的C++开源项目,它 ...

  3. ZOJ 3888 Twelves Monkeys (预处理+优先队列)

    题目链接:ZOJ 3888 Twelves Monkeys 题意:题目描写叙述起来比較绕,直接讲案例 9 3 3 9 1 6 1 4 1 6 7 2 输入n,m,q.n限制了你询问的年份,m台时光机, ...

  4. LeetCode 706. Design HashMap (设计哈希映射)

    题目标签:HashMap 题目让我们设计一个 hashmap, 有put, get, remove 功能. 建立一个 int array, index 是key, 值是 value,具体看code. ...

  5. MBEEWALK - Bee Walk

    A bee larva living in a hexagonal cell of a large honey comb decides to creep for a walk. In each “s ...

  6. Python猜年龄

    题目:Python实现猜年龄 步骤一:实现最简单的猜年龄 # 事先定义 dark_knight_age = 28 user_age = input('Please guess my age:') us ...

  7. ubuntu16.04 Kafka 安装

    Kafka核心概念: 下面介绍Kafka相关概念,以便运行下面实例的同时,更好地理解Kafka. 1. Broker Kafka集群包含一个或多个服务器,这种服务器被称为broker 2. Topic ...

  8. 腾讯云SSL证书管理

    2018050608010400y5mbx15awnpwxfhdmd7zqet1i9dzaqkvb6lxzosi4qq5ezbr

  9. handbook/CentOS/使用免费SSL证书让网站支持HTTPS访问.md

  10. [Swift通天遁地]八、媒体与动画-(2)实现视频文件的播放和画中画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...