出错点:确认按钮上.加onclick事件.每次点击都会追加给form追加on监听方法.累加on方法,重复提交

suppress_exception:true 阻止异常 (百度推送 jdk) 向下按

preventDefault ( jquery 阻止 form默认提交)

01传递参数,显示或者隐藏弹出框

/*start 显示和隐藏遮罩*/
function controlShade(date){
if(date == 's'){
$(".mask").show();  //添加遮罩,height:100% width:100% background:#ccc  opacity:0.7 z-index:999 弹出框z-index:9999
$(".maskbox").stop().animate({"margin-top":10+"px"},300);
}else if(date == 'h'){
$(".maskbox").stop().animate({"margin-top":-500+"px"},300,function(){
$(".mask").hide();
});
}
}

margin-top:-500推到页面以外

/*end 显示和隐藏遮罩*/

02 获取到form表单,追加on方法,传递submit参数,和方法,当form表单执行submit时.执行第二个参数的方法

<form id="addMester" action="">
<ul>
<li>
<span>姓名:</span>
<input type="text" name="contact_name" id="contact_name" class="inputStyle2 memberName" maxlength="10" required="required">
</li>
<li>
<span>手机号:</span>
<input type="tel" name="contact_mobile" id="contact_mobile" class="inputStyle2" required="required" pattern="(^1[3|4|5|7|8][0-9]{9}$)" title="请输入正确的手机号码!">
</li>
<li>
<span>证件类型:</span>
<select name="idType" id="idType">
<option value="身份证">身份证</option>
<option value="护照">护照</option>
<option value="军官证">军官证</option>
</select>
</li>
<li>
<span>证件号:</span>
<!--<input type="text" id="credentials" class="inputStyle2" required="required" pattern="" title="请根据证件类型输入正确的证件号">
</li>
</ul>

<div class="chooseBtns">
<input type="submit" class="sureAdd" onclick="" value="确定">
<input type="button" class="cancelAdd" onclick="controlShade('h')" value="取消">
</div>
</form>

03  prevent 阻止    present 现在 礼物

function initAddContectForm(){
var $forms=$("#addMester");

$forms.on('submit', function(ev){  //获取到form表单后,提交on监听方法.监听submit,调用方法,传递参数.去阻止默认
ev.preventDefault();  //一定要阻止默认的提交方法,

var name=$("#contact_name").val();
var mobile=$("#contact_mobile").val();
var idcardtype=$("#idType").find("option:selected").val();
var idcard=$("#credentials").val();

$.ajax({
url:"/Apply/addcontacts",
type:'POST',
data:{'contact_name':name,'contact_mobile':mobile,'contact_identication_type':idcardtype,'contact_identication_number':idcard},
dataType:'json',
success:function(d){
var html="<label style='padding:0 5px''><input type='checkbox' name='apply_members[]' value='"+d["contact_id"]+"'>"+d['contact_name']+"</label>";
$(".addMmber").append(html);
iChecks();return;
},error:function(){
alert('error');
}

});

controlShade('h');
});
}

04 页面加载完毕.启动方法,给form表单添加一个on方法,

<script>
initAddContectForm();
</script>

错误

form异步无刷新提交,提交后可以显示弹出框,否则弹出框会被刷新不见,使用 preventDefault的更多相关文章

  1. IOS GCD图片数据异步下载,下载完成后合成显示

    关于GCD使用详解,请看我的上一篇blog:http://www.cnblogs.com/xin-lang/p/6278606.html 前段时间遇到个需要异步下载,下载完成后再组合显示的东西.这里我 ...

  2. 实用ExtJS教程100例-010:ExtJS Form异步加载和提交数据

    ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 F ...

  3. GitHub提交代码后不显示用户名只显示邮箱

    提交完代码如图: 解决方案: 右键git bash here 输入命令如下: git config --global user.name "username" git config ...

  4. 关于跨域cookie,在代码无问题下,浏览器set-cookie显示有内容,但浏览器没写入cookie(刷新没有cookie)

    在排除了代码的问题后,如 Domain 不一致,过期时间是基于当前时间增加过期时效的. 在排查返回请求时发现是过期时间的问题,设置的过期时间(Expire)小于请求的时间(Date)时,浏览器就会写不 ...

  5. Zotero群组新建后无法显示

    我们新建Zotero的群组后无法显示. 此时需要点击文献库,就刷新了. 修改Zotero的群组后无法显示修改后的名称 点击同步即可同步内容.

  6. jquery.validate和jquery.form配合实现验证表单后AJAX提交

    基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...

  7. js后台提交成功后 关闭当前页 并刷新父窗体(转)

    原文地址:http://www.cnblogs.com/chenghu/p/3696433.html 后台提交成功后 关闭当前页 并刷新父窗体 this.ClientScript.RegisterSt ...

  8. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  9. js后台提交成功后 关闭当前页 并刷新父窗体

    后台提交成功后 关闭当前页 并刷新父窗体 this.ClientScript.RegisterStartupScript(this.GetType(), "message", &q ...

随机推荐

  1. my_query()的引号注意

    $sql="insert into lianxi values(null,'$usename','$email',$sex,$age,'$chusheng','$guanji')" ...

  2. Mysql索引基础

    Mysql索引基础 基本概念: 索引是一种特殊的数据库结构,可以用来快速查询数据库表中的特定记录.索引是提高数据库性能的重要方式.索引创建在表上,是对数据库表中一列或多列的值进行排序的一种结构.可以提 ...

  3. 寒假学干货之------android开发环境

    1.下载安装jdk(http://www.oracle.com/technetwork/java/javase/downloads/index.html)装se版的就可以了,复制jdk目录路径,之后配 ...

  4. js行内式遇到的一些问题 DOM对象和jq对象转换的问题

    这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用ajax重写页面加载数据,顺便给标签添加选中事件,做选中后变色的处理,但是却遇到一个问题,一直选不到触发事件这个 ...

  5. mac下搭建cordova开发环境

    Apache Cordova 原名叫PhoneGap.是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.PhoneGap最初由Nitobi开发,2011年 ...

  6. MySQL设置binlog日志的有效期自动回收

    设置日志保留天数,到期后自动删除 查看当前日志保存天数: show variables like '%expire_logs_days%'; 默认是0,即永不过期. 通过设置全局参数修改: set g ...

  7. yii中数据模型的使用

    模型是 CModel 或其子类的实例.模型用于保持数据以及与其相关的业务逻辑. 模型是单独的数据对象.它可以是数据表中的一行,或者一个用户输入的表单. yii数据库操作使用的是PDO,所以使用yii的 ...

  8. 网页弹出窗口工具推荐之jqmodal

    各种在jquery基础上实现的弹出窗口,有详细的开发说明文档.在项目中快速实现网页中弹出窗口的需求.基本能满足各种弹出窗口的需求 其官方网址如下http://jquery.iceburg.net/jq ...

  9. nodejs url方法

    ulrl方法 url.format(urlObj)   //将对象装换成url url.parse(urlStr[, parseQueryString][, slashesDenoteHost]) / ...

  10. 2、使用Struts2实现登录功能(没有连接数据)

    1.创建如下的目录结构 2.在com.entity包下创建 package com.entity; /** * 用户类 * @author Holly老师 * */ public class User ...