form异步无刷新提交,提交后可以显示弹出框,否则弹出框会被刷新不见,使用 preventDefault
出错点:确认按钮上.加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>
错误
