精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui弹出层按钮提交iframe表单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui弹出层表单

    万次阅读 多人点赞 2019-07-03 09:11:55
    弹出层表单很常见,也很实用,无论是在’pc端网页还是在移动端. 现在用layui来实现一下这个表单吧. html <form class="layui-form" id="test" style="display:none"> <div class="layui-form-item"> ...

    弹出层表单很常见,也很实用,无论是在pc端网页还是在移动端.

    现在用layui来实现一下这个表单吧.

    html

    <form class="layui-form" id="test" style="display:none">
      <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
          <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="on" class="layui-input" id="username" style="width:100px">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
          <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="on" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">辅助文字</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
         <select name="quiz" lay-search>
      <option value="">请选择</option>
      <optgroup label="城市记忆">
        <option value="你工作的第一个城市">你工作的第一个城市?</option>
      </optgroup>
      <optgroup label="学生时代">
        <option value="你的工号">你的工号?</option>
        <option value="你最喜欢的老师">你最喜欢的老师?</option>
      </optgroup>
    </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like[write]" title="写作" lay-skin="primary">
          <input type="checkbox" name="like[read]" title="阅读" checked lay-skin="primary">
          <input type="checkbox" name="like[dai]" title="发呆" lay-skin="primary">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
          <input type="checkbox" name="switch" lay-skin="switch" lay-text="开启|关闭">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="男" title="男">
          <input type="radio" name="sex" value="女" title="女" checked>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" >文本域</label>
        <div class="layui-input-block">
          <textarea lay-verify="required" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
    </form>
    <button id="div">提交</button>
    

    js

    layer.open({
     type:1,
     area:['500px','600px'],
      title: 'tianxie'
      ,content: $("#test"),
      shade: 0,
      btn: ['提交', '重置']
      ,btn1: function(index, layero){
      var kk=$("#username").val();
      alert(kk);
      },
      btn2: function(index, layero){
       alert("2222");
       return false;
      },
    cancel: function(layero,index){ 
       layer.closeAll();
      }
    
    }); 
    
    

    效果图

    效果图
    **欢迎光临本人咸鱼店铺
    最新VUE3.0+TS入门与实战,打造企业级组件,打造知乎专栏等
    最新React17+TS+全面拥抱HOOK打造企业级旅游系统等
    最新畅销大前端金职位教学视频等
    尽在大前端&Vue3&React

    展开全文
  • 如下所示: // 弹出楼栋负责人信息页面 layer.open({ type: 2, title:'请选择楼栋负责人', maxmin: false, area: ['60%', '80%'], ... //当点击‘确定'按钮的时候,获取弹出层返回的值 var res
  • 这里写自定义目录标题layui弹出层form表单自带的验证不执行废话少说放代码接下来如何让弹出层执行form验证规则 layui弹出层form表单自带的验证不执行 其实没有执行那个form的那个submit方法没有执行 废话少说放代码 ...

    layui弹出层form表单自带的验证不执行

    其实没有执行那个form的那个submit方法没有执行

    废话少说放代码

    这是官方的弹出层

    官方form表单例子

    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">单行输入框</label>
        <div class="layui-input-block">
          <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">验证必填项</label>
        <div class="layui-input-block">
          <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项,岂能为空?" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">验证手机</label>
          <div class="layui-input-inline">
            <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">验证邮箱</label>
          <div class="layui-input-inline">
            <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
    </form>
    

    js弹出层的例子

    layer.open({
      type: 1,
      title: false,
      closeBtn: 0,
      btn: ['提交', '取消'],
      shadeClose: true,
      skin: 'yourclass',
      content: '#layui-form'
    });
    
    

    接下来如何让弹出层执行form验证规则

    因为我们点击弹出层,就要执行弹出层的回调方法,
    在回调 success 方法中把 弹出层的 btn 添加submit。 让其点击按钮时 执行form提交功能

    layer.open({
      type: 1,
      title: false,
      closeBtn: 0,
      btn: ['提交', '取消'],
      shadeClose: true,
      skin: 'yourclass',
      content: '#layui-form'success: function(layero, index){
           // 添加form标识
           layero.addClass('layui-form');
           // 将保存按钮改变成提交按钮
           layero.find('.layui-layer-btn0').attr({
               'lay-filter': '事件名',
               'lay-submit': ''
           });
           form.render();
      }
    
    });
    

    现在弹出层就有了可以验证表单的功能了

    但是这个提交并不完整依旧有问题,只是部分验证有用,表单验证没有验证数据直接提交到后端去,接下如何如何优化呢?

    找到btn 确认按钮的回调方法 把form方法直接写在 yse 的回调方法中去

    layer.open({
      type: 1,
      title: false,
      closeBtn: 0,
      btn: ['提交', '取消'],
      shadeClose: true,
      skin: 'yourclass',
      content: '#layui-form'success: function(layero, index){
           // 添加form标识
           layero.addClass('layui-form');
           // 将保存按钮改变成提交按钮
           layero.find('.layui-layer-btn0').attr({
               'lay-filter': '事件名',
               'lay-submit': ''
           });
           form.render();
      }yes: function(index, layero){
        form.on('submit(事件名)', function(data){
       
    }
      }
    
    });```
    
    这样才算完美的
    
    
    展开全文
  • layui弹出层提交表单

    万次阅读 2018-09-12 17:35:06
    本文章使用layui框架,提交表单,如果使用其他的框架请右上...首先设置弹出层如下图: layer.open({ type : 2, title : "信息編輯", area : [ '45%', '35%' ], shade : 0, sha...

    本文章使用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 对弹窗 form表单赋值的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui 弹出层form表单提交验证

    千次阅读 2019-09-26 15:41:09
    id: 'LAY_layuipro' //设定一个id,防止重复弹出 , resize: false, btn: ['确定', '取消'], btnAlign: 'c', moveType: 1 //拖拽模式,0或者1 , content: $(".pop"), success: function (layero) { $(':...
    $('.addOne').on('click', function () {
                    layer.open({
                        type: 1,
                        title: false //不显示标题栏
                        ,
                        closeBtn: false,
                        area: '700px;',
                        shade: 0.8,
                        id: 'LAY_layuipro' //设定一个id,防止重复弹出
                        ,
                        resize: false,
                        btn: ['确定', '取消'],
                        btnAlign: 'c',
                        moveType: 1 //拖拽模式,0或者1
                        ,
                        content: $(".pop"),
                        success: function (layero) {
                            $(':focus').blur();
                            // 添加form标识
                            layero.addClass('layui-form');
                            // 将保存按钮改变成提交按钮
                            layero.find('.layui-layer-btn0').attr({
                                'lay-filter': 'formDemo',
                                'lay-submit': ''
                            });
                            form.render();
                        },
                        yes: function (layero, index) {
                            form.on('submit(formDemo)', function (data) {
                                //表单数据formData
                                var formData = data.field;
                                $.ajax({
                                    "url": '/ashx/employee/add_laborCosts.ashx',
                                    "data": formData,
                                    "type": "POST",
                                    "success": function () {
                                        table.reload('schoolIn', {
                                            url: "/ashx/employee/add_laborCosts.ashx"
                                        });
                                        layer.alert('添加成功', {
                                            skin: 'layui-layer-molv',
                                            closeBtn: 0
                                        })
                                    },
                                    "error": function (data) {
                                        layer.alert('添加失败', {
                                            skin: 'layui-layer-molv',
                                            closeBtn: 0
                                        })
                                    }
                                })
                            });
                        },
                    });
                });

     

    展开全文
  • 表单中添加了layui内置的表单验证规则后,需要submit提交表单才生效,但是弹出层中的表单一点击submit提交按钮后弹出层会立即关闭,这样就看不到成功或者错误的提示信息了。 layui内置的校验规则lay-verify=...
  • layui 弹出层和提交表单

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

    千次阅读 2019-04-07 08:38:27
    function addmenu() { layer.open({ title: "添加目录", type: 2, content: "menuadd.html", area: ['50%', '70%'], skin: "layui-layer-molv", ...
  • layui弹出form表单以及提交

    千次阅读 2020-12-29 03:36:01
    在前端开发时经常会用到form表单来进行数据交互,layui框架教程栏目为大家介绍了用layui前端框架弹出form表单以及提交的方法,希望可以在大家学习layui时有一定的帮助。第一步:引用两个文件第二步:点击删除按钮弹出...
  • layui的layer弹出层和form表单

    万次阅读 多人点赞 2019-06-27 22:33:12
    如果想用layui来完成增删改查,那么要会用弹出层和form表单这两个组件是必须的,所以今天就来介绍一些如何用layui完成基本的增删改查 弹出层layer 因为layui的特性,每次不管使用哪个组件,都要先把它的模块加载...
  • layui 弹出层表单提交

    万次阅读 2017-06-26 11:07:52
    layui是一个最近挺火的前端框架,公司新的...最困扰我的是一个弹出层表单提交问题:layer.open({ type: 2, title: ['个人资料-修改','font-size:13px;margin-top:10px;'], content:con,//con是Ajax返回的页面 bt
  • + '<div class=layui-form-item><label class=layui-form-label>角色名</label><div class=layui-input-block><input type=text name=rolename required lay-verify=required placeholder=请输入角色名 ...
  • form表单中的提交按钮 JS中提交form的内容
  • 使用layui框架弹出form表单以及提交的方法发布时间:2020-05-08 09:28:25来源:亿速云阅读:1056这篇文章主要介绍了使用layui框架弹出form表单以及提交的方法,具有一定借鉴价值,需要的朋友可以参考下。如下资料是...
  • layui弹出层按钮提交iframe表单

    千次阅读 2017-11-09 12:17:39
    layer.open({ id: 'LAY_layuipro', //设定一个id,防止重复弹出 type: 2, title:'添加人员信息', area: ['600px','340px'], btn: ['保存','关闭'],
  • 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元素,不能...
  • layer.open({ title: '添加导航', type: 1, content: formTpl, area: ['450px'], success:function(){ form.render(); } }); 注意:form.render(); 放置的位置即可 ...
  • 9_25 Layui弹出弹出层提交...layui弹出层表单 <html> <head> <title>教师添加</title> <link rel="stylesheet" href="/../back/layui/css/layui.css" media="all"></head> ...
  • layui的iframe弹出层表单数据回显

    千次阅读 热门讨论 2020-03-07 19:38:31
    一. 问题背景 父页面:list.jsp 子页面:userEdit.jsp 点击‘编辑’,将数据回显到表单,如下: 二. 解决方案 关键代码如下: layer.open({ type: 2, title: '编辑信息', area: ['750px', '755px'], ...
  • 我们都知道layui弹出层的btn属性生成的按钮,没办法实现弹出层内部的form验证成功后再执行相应操作。 我的方法是,在弹出层写一个隐藏按钮,一个隐藏的input和form.on方法,和自定义验证方法或者layui的验证方法,...
  • layui 弹出层关闭后又显示在页面上 在做页面时发现了这个问题,查看官网还有很多网上的帖子,但都不适用于我,所以将别人遇到的和我遇到的总结在一起希望对遇到问题的人有所帮助 <div id="test" style="display:...
  • layui弹出层如何传值

    千次阅读 2021-01-12 17:31:38
    layui弹出层传值的实现方法:1、从主窗口传值到弹出层;2、从弹出层传值到主窗口;3、通过session互传;4、通过调用父窗口的函数从而获取到父窗口的值。本教程操作环境:Windows7系统、layui1.0版,该方法适用于所有...
  • layui弹出层在登录中的应用 首先写好登录界面,然后在主界面登录按钮上添加layui弹出层
  • layui弹出层使用方法总结

    千次阅读 2019-02-13 18:28:27
    layui的模态窗口很强大,但是使用的时候要声明很多东西,并且对于窗口之间的参数传递也没有做具体的说明,所以基于layui弹出层的api进行了一些简单的封装,使用起来更加顺手,先上代码 function OpenDialog(id,...
  • layui弹窗间的传值(layui弹出层传值)(窗口传值)

    万次阅读 多人点赞 2019-04-04 10:07:17
    1、从主窗口传值到弹出层 2、从弹出层传值到主窗口 1、从主窗口传值到弹出层 首先时js changefileone函数时按钮绑定事件,按钮点击后调用这个函数然后弹出弹出层,加载changefile.html界面 然后success提前加载...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,526
精华内容 610
关键字:

layui弹出层表单