<!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. 《textanalytics》课程简单总结（1）：两种word relations——Paradigmatic vs. Syntagmatic

    coursera上的公开课<https://www.coursera.org/course/textanalytics>系列,讲的很不错哦. 1.两种关系:Paradigmatic vs. ...

  2. 已知目标qps跟并发用户数20，压测平均响应时间实例

    Jmeter性能测试案例(一) 转:https://blog.csdn.net/lovesoo/article/details/78579547 测试需求:测试20个用户访问网站在负载达到30QPS时 ...

  3. android音乐播放器开发 SweetMusicPlayer 智能匹配本地歌词

    上一篇写了使用MediaPlayer播放音乐,http://blog.csdn.net/huweigoodboy/article/details/39861539. 代码地址:https://gith ...

  4. SQL SERVER:一条SQL语句插入多条记录等

    在学习排名第二的mySql过程中,发现它的插入语句可以这样写: use test; create table fruits( fid char(10) not null ,s_id int null ...

  5. bzoj 4003 [JLOI2015]城池攻占 —— 左偏树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4003 其实蛮简单的,首先一个城市只会被其子树中的骑士经过,启发我们 dfs 序用可并堆合并子 ...

  6. openStack logo

  7. AD10 库下载地址

    http://wiki.altium.com/display/ADOH/Download+Libraries 最新更新库地址: http://designcontent.live.altium.com ...

  8. [Swift通天遁地]三、手势与图表-(10)创建包含圆点、方形、三角形图标的散点图表

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

  9. 如何写出网页高性能的DOM来提升网页的加载速度

    为什么要写高性能DOM? 一个网站,在页面上承载最多内容的就是DOM,而且无论是我们通过加载JS.加载图片,他们也是通过写HTML标签来实现的.而我们性能优化要做的无非就是几大块: 站点的网络消耗 D ...

  10. 题解报告：hdu 1213 How Many Tables

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1213 Problem Description Today is Ignatius' birthday. ...