使用layer.open打开自定义弹窗,获取表单内容发送到后端

layui.layer弹层组件官方文档

layer.open的type参数有5个不同的值,如果要自定义弹窗内容,可以使用 type: 1(页面层)。
使用页面层,则参数content可填写html或使用dom,本次我使用的dom方法。

1、首先在body外编写一个表单(主要是防止被其他元素所影响)
<form action="" id="create_table_from" class="layui-form" lay-filter="create_table_from" style="display: none;">
    <div class="layui-form-item">
        <label class="layui-form-label">工单名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入工单名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属分类</label>
        <div class="layui-input-block">
            <select name="type_id" lay-verify="required">
                <option value=""></option>
                <option value="1">默认分类</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">工单说明</label>
        <div class="layui-input-block">
            <textarea name="description" placeholder="请输入工单说明" class="layui-textarea"></textarea>
        </div>
    </div>
</form>
  • 一定要设置好form的id以及lay-filter参数,方便后续获取表单
  • 表单需要先隐藏display: none;
2、表单写好后,开始配置layer.open参数
layer.open({
	//基本层类型
    type:1,
	//宽高
    area:['600px','500px'],
    //标题
    title: '创建新工单',
    //内容
    content: $('#create_table_from'),
    //按钮
    btn:['创建','取消'],
    //确定按钮
    yes:() => {
    	//开启loading
        const loading = layer.load(2);
        //获取表单内的所有值
        const formData = layui.form.val("create_table_from");
        //发送数据到接口
        $.post('__URL__/table/post_table', formData, (res)=>{
        	//关闭loading
            layer.close(loading);
            console.log(res);
        });
    },
});
  • 通过layui.form.val()来获取表单内的所有值,参数为html中lay-filter设置的值

效果图:

在这里插入图片描述

  • 本次代码中有引入JQ
  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值