精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui表单提交以及验证和修改弹框的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui 弹窗表单赋值

    千次阅读 2020-08-13 11:22:18
    layui官方示例 HTML代码 <form class="layui-form hide" action="" lay-filter="example" id="edit_content"> <div class="layui-form-item"> <label class="layui-form-label">用户编号:&...

    layui官方示例

    HTML代码

    <form class="layui-form hide" action="" lay-filter="example" id="edit_content">
    			<div class="layui-form-item">
    				<label class="layui-form-label">用户编号:</label>
    				<div class="layui-input-block">
    					<div class="layui-input-inline">
    						 <input type="text" id="edit_userid" name="userid" readonly  lay-verify="readonly" value="" class="layui-input">   
    					</div>
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">用户名:</label>
    				<div class="layui-input-block">
    					<div class="layui-input-inline">
    						 <input type="text" name="username" readonly  lay-verify="readonly" value="" autocomplete="off" class="layui-input">   
    					</div>
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">数据查看权限:</label>
    				<div class="layui-input-block">
    					<div class="layui-input-inline">
    						<select name="view_data" lay-filter="view_data">
    							<option value="0">0</option>
    							<option value="1">1</option>
    						</select>
    					</div>
    				</div>
    				 
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">用户管理权限:</label>
    				<div class="layui-input-block">
    					<div class="layui-input-inline">
    						<select name="manage_user" lay-filter="manage_user">
    							<option value="0">0</option>
    							<option value="1">1</option>
    						</select>
    					</div>
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">终端管理权限:</label>
    				<div class="layui-input-block">
    					<div class="layui-input-inline">
    						<select name="manage_terminal" lay-filter="manage_terminal">
    							<option value="0">0</option>
    							<option value="1">1</option>
    						</select>
    					</div>
    				</div>
    			</div>
    			<div class="layui-form-item tc">
    				<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="formDemo">提交</button>
    				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
    			 </div>
    		</form>
    

    js

     table.on('tool(test)', function(obj){
    				var data = obj.data;
    				layui.form.val('example', {
    				  "userid": data.userid
    				  ,"username": data.username
    				  ,"view_data": data.view_data
    				  ,"manage_user": data.manage_user
    				  ,"manage_terminal": data.manage_terminal
    				});
    				if(obj.event === 'edit'){
    					  layer.open({
    						type: 1, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
    						skin: 'layui-layer-lan',
    						area: '500px',
    						title: ['修改用户权限内容', 'font-size:18px;'],
    						content: $('#edit_content'), //数组第二项即吸附元素选择器或者DOM
    						//shade: [0.8, '#393D49']
    						anim: 0, //动画
    						maxmin: false, //最大最小化
    						//tips: [4, '#c00']//未知
    					});
    				}
    			  });
    			});
    			
    

    在这里插入图片描述

    展开全文
  • layui 弹窗表单提交后跳转到列表页

    千次阅读 2019-03-25 14:44:57
    先大概描述下遇到的问题,就是在使用 layui做后台框架的时候,添加和编辑操作,都是用的弹窗 layer ,这样有一个问题,就是在提交表单后,应该跳转到列表页。 先说说第一种解决方案: q.post('{:url("edit")}?...

    荆轲刺秦王

    先大概描述下遇到的问题,就是在使用 layui 做后台框架的时候,添加和编辑操作,都是用的弹窗 layer ,这样有一个问题,就是在提交完表单后,应该跳转到列表页。

    先说说第一种解决方案:

    q.post('{:url("edit")}?id='+id,param,function(json){
                    layer.close(loading);
                    if(json.status == 1){
                        layer.msg(json.msg, {icon: 1, time: 1600}, function(){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭 
                            top.window.location.href="{:url('course_case/index')}";
                            // window.location.href="{:url('course_case/edit')}?id="+id;
                        });
                    }else{
                        layer.msg(json.msg, {icon: 2, anim: 6, time: 1600});
                    }
                },'json');

    大概思路就是,现获取当前弹窗的索引,然后再关闭,最后跳转。代码中的注释也很清楚。

    再来说说第二种方式:

    jq.post('{:url("add")}',param,function(json){
                    layer.close(loading);
                    if(json.status == 1){
                        layer.msg(json.msg, {icon: 1, time: 1600}, function(){
                            //window.location.href="{:url('hotel/add')}";
                            setTimeout(function(){parent.window.location.reload();},100);
                        });
                    }else{
                        layer.msg(json.msg, {icon: 2, anim: 6, time: 1600});
                    }
                },'json');

    这种方式更为简单粗暴一点,定时器,然后父窗口刷新。

    展开全文
  • 今天小编就为大家分享一篇layui弹窗 form表单赋值的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui弹出层按钮提交iframe表单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 最近做项目遇到这样的需求使用layer在弹窗内完成新增,成功后提示并刷新页面,下面小编给大家带来了使用layer弹窗layui表单做新增功能,具体实现代码,参考下本
  • layui弹窗不显示文字导致原因+解决

    千次阅读 2020-04-12 16:06:08
    ##layui弹窗不显示文字导致原因+解决 ###原因 这里我遇到的是ajax上传时候没有设置 dataType:‘json’ dataType设置服务器返回数据格式 ###解决 1:设置返回数据格式 例如: dataType:‘json’ [见下方图1] 2:拼接...

    layui弹窗不显示文字导致原因+解决

    原因

    这里我遇到的是ajax上传时候没有设置 [dataType:‘json’]属性 (dataType设置服务器返回数据格式)

    解决

    1:设置返回数据格式 例如: dataType:‘json’ [见下方图1]
    2:拼接标签 例如: [见下方图2]

    [图1]

    在这里插入图片描述

    [图2]

    在这里插入图片描述

    展开全文
  • 先提提我遇到的坑:在提交ajax表单后,控制器端已经将数据存到了数据库,也打印出了返回的json数据,但是ajax的success和error方法就是不执行,开始还以为是自己的代码有问题。后来在layui的官网看了官方的案例程序...

    先提提我遇到的坑:在提交ajax表单后,控制器端已经将数据存到了数据库,也打印出了返回的json数据,但是ajax的success和

    error方法就是不执行,开始还以为是自己的代码有问题。

    后来在layui的官网看了官方的案例程序,发现了这个:

    //监听提交

    form.on('submit(demo1)', function(data){

    layer.alert(JSON.stringify(data.field), {

    title: '最终的提交信息'

    })

    return false;

    });

    关键就在这个return false。

    贴一下代码吧:

    弹出层JS:用点击事件来触发这个addlesson()

    function addlesson() {

    layui.use('layer', function () {

    var layer = layui.layer;

    // layer.msg('hello');

    layer.open({

    type: 2 //此处以iframe举例

    , title: '添加新课程'

    , area: ['600px', '500px']

    , shade: 0

    , maxmin: true

    , offset: 'auto'

    , content: '{:url("index/addlesson")}'

    , btn: ['关闭'] //只是为了演示

    , yes: function () {

    layer.closeAll();

    // $(that).click();

    }

    , zIndex: layer.zIndex //重点1

    , success: function (layero) {

    layer.setTop(layero); //重点2

    }

    });

    });

    };

    PS:上面的content是一个单独的页面,用链接来表示,也可以是一些文本内容。

    81d7f65ccc45ada132c12147ee43f3c8.png

    在弹出层中提交表单JS:

    注意这里的:

    parent.layer.closeAll();//调用父级的layer来关闭弹窗

    贴一下表单的代码:

    课程名

    课程类型

    {volist name='type' id='vo'}

    {$vo.typename}

    {/volist}

    课程海报

    课程简介

    下面来贴一下没有文件的表单提交:

    表单html:

    提交评论

    JS:

    layui.use(['form', 'layer','layedit', 'laydate','upload'], function(){

    var form = layui.form;

    form.on('submit(demo1)', function(data){

    $.ajax({

    url:"{:url('index/commentadd')}",

    method:'post',

    data:data.field,

    dataType:'JSON',

    success:function(data){

    if(data.status='0'){

    layer.msg(data.msg,{icon:6});

    location.href=location.href;//刷新页面

    }

    else

    layer.msg(data.msg,{icon:5});

    },

    error:function (data) {

    layer.msg(data.msg,{icon:5});

    }

    })

    return false;

    });

    });

    这里用的是官方给的方式提交,注意上面的demo1相关联的表单。

    控制器中处理完数据后返回值:

    if ($re){

    $date=[

    'status'=>0,

    'msg'=>'成功'

    ];

    }else{

    $date=[

    'status'=>1,

    'msg'=>'失败'

    ];

    }

    return json($date);

    展开全文
  • 最近遇到了一个问题:LayUI弹出子窗口后,提交更新表单后后台数据已经发生改变,但是回到父页面后,数据表格却一直不更新,只有重新进入该页面才会重新发请求拿到新的数据,这个Bug花了我一整天时间来解决。...
  • 今天小编就为大家分享一篇使用layer弹窗提交表单时判断表单是否输入为空的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui 图片上传+表单提交+ Spring MVC的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用layer弹窗 弹出表单,编辑后提交到后台的功能 详细参考该篇文章(复制下方地址到浏览器上访问) 复制该urll到浏览器地址栏,回车访问=> http://www.shagua.wiki/project/3?p=117 复制该urll到浏览器地址栏,回车...
  • 当表单中添加了layui内置的表单验证规则后,需要submit提交表单才生效,但是弹出层中的表单一点击submit提交按钮后弹出层会立即关闭,这样就看不到成功或者错误的提示信息了。 layui内置的校验规则lay-verify=...
  • layui弹窗 form表单赋值的实现方法,目的:点击编辑按钮 实现 数据回显到弹出 子页面 表单 内。如下图:Html 代码:用 户名其它省略...Js 代码:layer.open({type: 2,title: '编辑用户',content: 'xx.html',max...
  • layui 表单form提交弹窗

    千次阅读 2018-12-12 19:08:26
    导包 ... /*删除开始*/ $(".del").click(function () { var id = $(this).attr("... skin: 'layui-layer-molv' //样式类名 自定义样式 , closeBtn: 1 // 是否显示关闭按钮 , a...
  • springboot+layui+jquery+layui弹窗

    千次阅读 2018-07-05 10:33:30
    layui 的增删改查 。。。 废话不多说上代码由于时间原因 暂时只实现了查询的后台完整代码其他的会之后贴出来 其实与查询相似 有需要的可以等我贴出 也可以照着查询仿写先展现效果前台代码body&gt; &lt;...
  • 这里写自定义目录标题layui弹出层form表单自带的验证不执行废话少说放代码接下来如何让弹出层执行form验证规则 layui弹出层form表单自带的验证不执行 其实没有执行那个form的那个submit方法没有执行 废话少说放代码 ...
  • 需求:使用layer在弹窗内完成新增,成功后提示并刷新页面(父...layui表单-layer弹窗 b*页面代码 --构建from表单 <div id="add-main" style="display: none;"> <form class="layui-form" id="add-fo...
  • layui 弹出层和提交表单

    万次阅读 2018-07-18 11:43:14
    在点击修改按钮的时候,content 路径CPTL/ +curId ,路径中的curid 是当前信息的ID,弹窗跳出当前的数据信息   ...把提交的按钮写在子页面里面,这里没有用layui 自带的yes:function(),   3....
  • layui 弹出框提交表单

    千次阅读 2020-12-29 03:38:30
    layer.open({type:1,title:"发送消息",skin:"myclass",//自定样式area:["800px","400px"],btn: [‘发送‘, ‘取消‘],btnAlign:‘c‘, //按钮居中content:$("#t"), //如果要form表单提交必须是$("#t") dom元素,不能...
  • 今天小编就为大家分享一篇layui 解决form表单点击无反应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 只需一步,就能使用layui自带的验证方法对弹出层的form表单进行验证: 在layer.open中添加红色框部分就能实现验证了。 大家可以点击下面的链接查看更多内容: ...
  • form表单中的提交按钮 JS中提交form的内容
  • 今天小编就为大家分享一篇layer关闭弹出窗口触发表单提交问题的处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用layui点击弹出表单:点击个人信息弹出表单:1、首先是页面的点击弹出事件。$(function () { var studentId=""; if ('${zyTb.sudentId}' != null &&'${zyTb.sudentId}' != '') {studentId='${zyTb....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 528
精华内容 211
关键字:

layui弹窗提交表单