layui弹出层提交表单

一个高效工作的家伙

已于 2023-06-01 15:22:41 修改

阅读量1k

点赞数

文章标签： layui 前端 javascript

于 2023-06-01 15:07:24 首次发布

本文链接：https://blog.csdn.net/qiuweifan/article/details/130987885

版权

本文章使用layui框架，弹出层打开子页面，并实现父子页面传递参数。

父页面layer写法

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui弹出层demo</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../res/layui/dist/css/layui.css"    media="all">
</head>
<body>
    <button type="button" class="layui-btn layui-btn-normal" id="query">搜索</button>
<script src="//res/layui/dist/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
    $('#query').on('click',function(){
           layer.open({
                type: 2//iframe
                ,title: '子页面'
                ,area: ['800px', '260px']
                ,shade: 0
                ,maxmin: true
                ,content: '../demo.html?desc=24445'
                ,btn: '复制内容'
                ,btnAlign: 'c' //按钮居中
                ,yes: function(index,layero){
                    //需要找到它的子窗口body
                    var updateBody = layer.getChildFrame('body', index); 
                    // 单选按钮特殊处理
                    var val = updateBody.find("input[name=sex]").val();
                    //todo 此处可写相应的逻辑
                    .....
                    //todo
                    //关闭菜单
                    layer.closeAll();
                } 
            })
    })
})

</script>
</body>
</html>

子页面写法

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="../layui/css/layui.css" rel="stylesheet" >
</head>
<body>
<form class="layui-form">
	<div class="layui-form-item">
        <div class="layui-input-block" id="modal" lay-filter="modal">
              <input type="radio" name="sex" value="男" title="男" checked="">
              <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>
</form>
<script src="//res/layui/dist/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
    var param = "desc";
    //获取父页面的参数
    var desc = getQueryString(param);
    console.log(desc);
    //获取页面的参数变量
	var getQueryString = function (name) {
       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
       var r = window.location.search.substr(1).match(reg);
       if (r != null) return unescape(r[2]);
       return null;
    }
})
	
</body>
</html>

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