layui弹出层提交表单！

本文章使用layui框架，提交表单，如果使用其他的框架请右上角！

首先设置弹出层如下图：

layer.open({ type : 2,                                                   title : "信息編輯", area : [ '45%', '35%' ], shade : 0,shadeClose : false, content : "/admin/user/classInfoEditTurn?classId="+data.classId,btn:['提交'], yes:function(index,layero){ var body = top.layer.getChildFrame('body',index);  var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method(); console.log(body.find('#classId').val());$.ajax({url:"/admin/user/updateClassInfo",type:'post',data:{'classId':body.find('#classId').val(),'className':body.find('#className').val(),'classType':body.find('#classType').val(),'gradeName':body.find('#gradeName').val(),'schoolPart':body.find('#schoolPart').val()},dataType:'json',success:function(data){if (data.code == 0) {layer.msg(data.msg,{icon:1,time:1000},function(){parent.layer.close(index)}); } else if (data.code == 500) {layer.msg(data.msg,{icon:2,time:1000},function(){});}  }}); },closeBtn : 1,btnAlign:'c',success : function(layero, index) { },  cancel : function() { layer.open({type: 1,title: false //不显示标题栏,closeBtn: false,area: '300px;',shade: 0.8,id: 'LAY_layuipro' //设定一个id，防止重复弹出,btn: ['是的关闭它', '我再考虑一下'],yes:function(){layer.closeAll();},btnAlign: 'c',moveType: 1 //拖拽模式，0或者1,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;text-align:center;font-size:20px;">确定关闭吗~!</div>'});return false;},end : function() {layer.closeAll();location.reload();}});

代码说明：

特别声明：在父层提交表单，需要获取表单页面的数据，并且调用后台接口，如上代码中的yes:后面的代码，要注意，这里的layui教程中，yes后面的function参数顺序错误了应该是function(index,layero){}不是function(layero,index){}，鄙人也是花了很久才弄明白这么回事。

接下来就是获取iframe里面内容，如var body = top.layer.getChildFrame('body',index); console.log()一下body.html()，能看到页面内容，获取页面的值，使用body.find('#id').val();样式来获取input标签的内容，其他的标签也是照样获取，然后再利用ajax想后台提交数据就能够提交表单了；

如果中间出现：Syntax error, unrecognized expression: #layui-layer[object Object] 和layero.find is not a function这样的问题就是yes后面的function（）中的layero,index参数顺序错误，这里注意一下在参照layui教程就可以获取页面参数了

layui弹出层提交表单！相关推荐

layui弹出层的表单验证
这里写自定义目录标题 layui弹出层form表单自带的验证不执行废话少说放代码接下来如何让弹出层执行form验证规则但是这个提交并不完整依旧有问题,只是部分验证有用,表单验证没有验证数据直接提 ...
html表单弹窗提示框,【前端】弹出框提交表单
[前端]弹出框提交表单发布时间:2018-11-03 22:30, 浏览次数:826 目录 * 功能描述 * 效果截图 * 代码 * html代码 * 触发弹出窗口的按钮 * js代码 * 弹出框的 ...
JEECG弹出框提交表单
一.设备主页面(deviceMain.jsp) <t:dgToolBar title="编辑设备" icon="icon-edit" url=" ...
layui写弹出框显示表单信息_layui 弹出框提交表单
layer.open({ type:1, title:"发送消息", skin:"myclass",//自定样式 area:["800px" ...
微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式
vantweapp中Dialog弹出框使用组件调用,怎么将form表单的提交按钮与Dialog弹出框相结合呢解决方案: wxml代码 <van-dialoguse-slottitle=&quo ...
html5弹出层表单,layer弹出层实现表单提交
js $("#info_withdraw").on('click', function () { //iframe层 layer.open({ type: 2, title: '申 ...
layui弹出层在登录中的应用
layui弹出层在登录中的应用首先写好登录界面,然后在主界面登录按钮上添加layui弹出层. 登录界面.注册界面二合一(含表单验证) <!DOCTYPE html> <html l ...
layui弹出层之应用实例讲解
从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...
layui弹出层使用方法总结
layui的模态窗口很强大,但是使用的时候要声明很多东西,并且对于窗口之间的参数传递也没有做具体的说明,所以基于layui弹出层的api进行了一些简单的封装,使用起来更加顺手,先上代码 functio ...

layui弹出层提交表单！

layui弹出层提交表单！相关推荐

最新文章

热门文章