layui点击弹框页面 表单请求

Posted ```...简单点

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui点击弹框页面 表单请求相关的知识,希望对你有一定的参考价值。

$("#addSite").click(function () {
    layer.open({
        title: ‘添加站点‘,
        type: 1,
        area: [‘700px‘, ‘400px‘],
        content: ‘<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>‘ +
        ‘<form class="layui-form"> ‘ +
        ‘<div class="layui-form-item">‘ +
        ‘<div class="layui-inline">‘ +
        ‘<label class="layui-form-label">站点名称</label>‘ +
        ‘<div class="layui-input-inline">‘ +
        ‘<input type="text"  required lay-verify="required" name="siteName"  class="layui-input" value="" >‘ +
        ‘</div></div>‘ +
        ‘<div class="layui-inline">‘ +
        ‘<label class="layui-form-label">ICP备案号</label>‘ +
        ‘<div class="layui-input-inline">‘ +
        ‘<input type="text"  required lay-verify="required" name="fileRecord"    class="layui-input" value="" >‘ +
        ‘</div></div>‘ +
        ‘</div>‘ +
        ‘<div class="layui-form-item">‘ +
        ‘<div class="layui-inline">‘ +
        ‘<label class="layui-form-label">联系电话</label>‘ +
        ‘<div class="layui-input-inline">‘ +
        ‘<input type="text"  required lay-verify="required" name="sitePhone"  class="layui-input" value="" >‘ +
        ‘</div></div>‘ +
        ‘<div class="layui-inline">‘ +
        ‘<label class="layui-form-label">平台信息</label>‘ +
        ‘<div class="layui-input-inline">‘ +
        ‘<input type="text"  required lay-verify="required" name="type"    class="layui-input" value="" >‘ +
        ‘</div></div>‘ +
        ‘</div>‘ +
        ‘<div class="layui-form-item" style="width: 621px;">‘ +
        ‘<label class="layui-form-label">备注</label>‘ +
        ‘<div class="layui-input-block">‘ +
        ‘<textarea placeholder="请输入内容" name="siteMark" class="layui-textarea"></textarea>‘ +
        ‘</div>‘ +
        ‘</div>‘ +
        ‘</form>‘,
        btnAlign: ‘c‘,
        btn: [‘确定‘, ‘取消‘],
        yes: function (index, layero) {
            var str = $("input[name=isIndividual]").val();
            if (str == "on") {
                str = "1";
            } else {
                str = "0";
            }

            if ($("input[name=siteName]").val() == null || $("input[name=siteName]").val() == "") {
                layer.msg(‘请输入站点名称‘, {icon: 5, time: 2000, area: ‘200px‘, type: 0, anim: 6,}, function () {
                    $("input[name=siteName]").focus();
                });
                return false;
            } else if ($("input[name=fileRecord]").val() == null || $("input[name=fileRecord]").val() == "") {
                layer.msg(‘请输入备案号‘, {icon: 5, time: 2000, area: ‘200px‘, type: 0, anim: 6,}, function () {
                    $("input[name=fileRecord]").focus();
                });
                return false;
            } else if ($("input[name=type]").val() == null || $("input[name=type]").val() == "") {
                layer.msg(‘请输入平台信息‘, {icon: 5, time: 2000, area: ‘200px‘, type: 0, anim: 6,}, function () {
                    $("input[name=type]").focus();
                });
                return false;
            } else if ($("input[name=sitePhone]").val() == null || $("input[name=sitePhone]").val() == "") {
                layer.msg(‘请输入联系电话‘, {icon: 5, time: 2000, area: ‘200px‘, type: 0, anim: 6,}, function () {
                    $("input[name=sitePhone]").focus();
                });
                return false;
            }
            var formData = {
                siteName: $("input[name=siteName]").val(),
                fileRecord: $("input[name=fileRecord]").val(),
                type: $("input[name=type]").val(),
                sitePhone: $("input[name=sitePhone]").val(),
                siteMark: $("textarea[name=siteMark]").val()
            };
            console.log(formData);
            $.post(‘${pageContext.request.contextPath}/leaguer/addSite‘, formData, function (data) {
                //判断是否发送成功
                if (data.code == 200) {
                    layer.msg(data.message);
                    layer.close(index);
                    parent.document.getElementById(‘my_iframe‘).contentWindow.location.reload(true);
                } else {
                    layer.msg("保存失败...", {type: 1});
                }
            })
        }, btn2: function (index, layero) {
            layer.msg("取消");
            //return false 开启该代码可禁止点击该按钮关闭
        }, cancel: function () {
            layer.msg("关闭窗口");
            //右上角关闭回调
            //return false 开启该代码可禁止点击该按钮关闭
        },
        success: function () {
            layui.use(‘form‘, function () {
                var form = layui.form; //只有执行了这一步,部分表单元素才会修饰成功
         form.render(‘checkbox‘);
                form.on(‘checkbox(istrue)‘, function (data) {
                    /* if(data.elem.checked){
                     emailConfig[‘isenterprise‘]=1;
                     }; //是否被选中,true或者false*/
                });
            });
        }
    });
})

 

以上是关于layui点击弹框页面 表单请求的主要内容,如果未能解决你的问题,请参考以下文章

layui layer弹框中表格的显示

layui弹框封装成vue写法

layui/layer 弹框关闭父级弹框

layui/layer 弹框关闭父级弹框

layui渲染form表单

Layui的layer.confirm弹框用法,很详细