弹出框,添加出行人员,追加提交方法,H5检查OK再调用ajax提交到controller

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>

错误

时间: 2024-12-30 10:28:57

弹出框,添加出行人员,追加提交方法,H5检查OK再调用ajax提交到controller的相关文章

弹出框页面居中显示的两种方法

原文地址:http://blog.csdn.net/chueia/article/details/68927501 第一种: position:fixed; top:0; right:0; left:0; bottom:0; margin:auto; //height:30%; 这种方法在元素的宽高不固定时会全屏拉伸元素,在高度不固定靠子元素撑开自适应的情况下不适用.但是在宽高固定的情况下可以用,没有兼容性问题. 第二种: position:fixed; top:50%; left:50%; t

cocos2dx2.2.2弹出框的实现

在上一篇文章中,我们利用CCEditBox实现了输入框功能,使我们在注册时可以输入用户名和密码.但是当用户名和密码的输入不符合规范时,我们应该怎样给与用户提示呢?下面我们就来介绍弹出框的实现方式. 我们的思路就是,创建一个模态层,将当前场景的内容盖住,然后在弹出层上给与用户相应的提示并提供一个关闭弹出层的按钮.首先,我们先来看一下效果. 这里的标题和具体提示信息需要是自定义的,才能满足不同场景的需要,而确定按钮只是用来关闭弹出层的,所以这个弹出框的主要元素并不多,实现起来也比较简单. 另外,还有

【Android】各式各样的弹出框与对菜单键、返回键的监听

Android自带各式各样的弹出框,弹出框也是安卓基本的组件之一.同时安卓程序可以对菜单键.返回键的监听,但在安卓4.0之后就禁止对Home键的屏蔽与监听,强制保留为系统守护按键,如果非要对Home键的屏蔽与监听,就会出现java.lang.IllegalArgumentException: Window type can not be changed after the window is added.的错误. 下面写一个小程序,来说明Android各式各样的弹出框,同时,安卓是如何对菜单键.

第二百四十六节,Bootstrap弹出框和警告框插件

Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. 基本用法 注意:必须在js结合popover()方法使用 data-toggle="popover"弹出框事件绑定,写在触发弹出框的元素里,执行弹出框事件点击弹出或隐藏(Bootstrap)title=""设置弹出框标题,写在弹出框元素里,(Bootstrap)

jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框

最近封装上瘾,想起以前做的一个轻巧的弹出框,是样式和脚本分离的,于是重新封装了一下,把样式标签统一到js里了. 里面还有一些问题,但不影响使用,有兴趣的同学,可以参考完善下,有好的建议,请不吝赐教. var PopDialogDefaultConfig = { hasCover: true, //是否带遮罩层 colorOfCover: "#000", //遮罩层颜色 transparencyOfCover: 80, //遮罩层透明度(alpha值,opacity值通过换算得到) bo

mvc 在弹出框中实现文件下载

var myParent = parent.parent.parent.parent.parent.parent.parent.parent.parent.parent.parent.parent; FileDown = function (fileName, realFileName) { $(myParent.document.body).find("#down-file-iframe").remove(); var $iframe = $('<iframe name=&qu

EasyUI+JavaScript 添加和修改弹出框按钮

写这篇文章只是想吐槽一下在做三个弹出框按钮的心酸史,为什么只写两个呢?因为之前看到过别人写了一个删除的,所以我只写剩下的两个吧!现在做的系统总是涉及到增删改的总会上面三个好看的按钮,下面一个好看的DataGrid. 添加和修改弹出框: 首先要加载我们做好的添加和编辑弹出框. <span style="font-size:14px;"><div id="addTemplate"> @* 加载添加流程对话框 *@ @{Html.RenderPar

Bootstrap方法为页面添加一个弹出框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 弹出框(Popover)插件</title> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap

JS组件Bootstrap实现弹出框和提示框效果代码

JS组件Bootstrap实现弹出框和提示框效果代码 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2015-12-08我要评论 这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编 辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户