标签：
01传递参数,显示或者隐藏弹出框
/*start 显示和隐藏遮罩*/
function controlShade(date){
if(date == ‘s‘){
$(".mask").show();
$(".maskbox").stop().animate({"margin-top":10+"px"},300);
}else if(date == ‘h‘){
$(".maskbox").stop().animate({"margin-top":-500+"px"},300,function(){
$(".mask").hide();
});
}
}
/*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
function initAddContectForm(){
var $forms=$("#addMester");
$forms.on(‘submit‘, function(ev){
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>
错误
弹出框,添加出行人员,追加提交方法,H5检查OK再调用ajax提交到controller
标签：
原文地址：http://www.cnblogs.com/bj-tony/p/5477345.html
