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

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

    在点击修改按钮的时候,content 路径CPTL/ +curId  ,路径中的curid 是当前信息的ID,弹窗跳出当前的数据信息

     

    2. 

    把提交的按钮写在子页面里面,这里没有用layui 自带的yes:function(),

     

    3.

    展开全文
  • 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

    展开全文
  • layui的layer弹出层form表单

    万次阅读 多人点赞 2019-06-27 22:33:12
    如果想用layui来完成增删改查,那么要会用弹出层form表单这两个组件是必须的,所以今天就来介绍一些如何用layui完成基本的增删改查 弹出层layer 因为layui的特性,每次不管使用哪个组件,都要先把它的模块加载...
  • 这里写自定义目录标题layui弹出层form表单自带的验证不执行废话少说放代码接下来如何让弹出层执行form验证规则 layui弹出层form表单自带的验证不执行 其实没有执行那个form的那个submit方法没有执行 废话少说放代码 ...
  • form表单中的提交按钮 JS中提交form的内容
  • layui 弹出层表单提交

    万次阅读 2017-06-26 11:07:52
    layui是一个最近挺火的前端框架,公司新的...最困扰我的是一个弹出层表单提交问题:layer.open({ type: 2, title: ['个人资料-修改','font-size:13px;margin-top:10px;'], content:con,//con是Ajax返回的页面 bt
  • 精选30+云产品,助力企业轻松上云!...页面 首页--工作台 按开始日期 按结束日期 单选下拉框 请选择 查询 重置 添加 标题 按结束日期 内容文本域 立即提交 重置
  • 弹出层表单提交数据完美解决

    热门讨论 2009-03-18 16:11:28
    弹出层表单提交数据完美解决弹出层表单提交数据完美解决弹出层表单提交数据完美解决弹出层表单提交数据完美解决
  • layer.open({ type : 1, title : '添加角色', area : [ '500px', '350px' ], shadeClose : true, // 点击遮罩... btn : [ '保存', '取消' ], success : function(layero, index) { // 成功弹出后回调 ...
  • Form表单onclick函数: var index = parent.layer.getFrameIndex(window.name);//修改成功的时候点击立即提交会关闭子窗口,这里获取...layui弹出层方法: :endfunction(){ window.location.reload(); } ...
  • layui弹出层按钮提交iframe表单

    千次阅读 2017-11-09 12:17:39
    layer.open({ id: 'LAY_layuipro', //设定一个id,防止重复弹出 type: 2, title:'添加人员信息', area: ['600px','340px'], btn: ['保存','关闭'],
  • layui教程(一) form 表单提交问题

    千次阅读 2019-09-27 17:25:28
    点击打开表单页面(弹出层形式)如: 父页面打开子页面的代码 layer.open({ type:2, //类型为1时可以为html,和代码,为2时页面地址 title: title, //弹出层的标题 area: [width, heigth], //大小 ...
  • 今天小编就为大家分享一篇layer关闭弹出窗口触发表单提交问题的处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • //弹出层中html代码 <button class="layui-btn" id="close" lay-filter="close">关闭</button> js代码 $(document).on('click', '#close', function() { layer.close(layer.index); ...
  • 第二步:点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr("id"); layer.alert('您确定要删除操作吗?', { skin: 'layui-layer-molv' //样式类名 自定义样式 , ...
  • layer.js,一个jquery的插件,可以用它来做信息提示,弹出层等。 官方demo地址:http://layer.layui.com/ ...使用layer.js做弹出层时,在弹出层里直接提交form表单,返回的画面仍然停留在弹出层里。...
  • layer.open({ title: '添加导航', type: 1, content: formTpl, area: ['450px'], success:function(){ form.render(); } }); 注意:form.render(); 放置的位置即可 ...
  • 今天小编就为大家分享一篇layui表单提交以及验证和修改弹框的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layer 在弹出层表单提交 点击提交可以和后台交互,但是提交完成后ajax的success不执行。我很郁闷,我猜想是因为点击提交后刷新了弹出层,当成功后,ajax保留的上次提交的报头信息和刷新完的页面信息不一样,所以...
  • 1)在弹出层的操作: ... //这里是提交操作_弹出层 $.ajax({ url:'/conpany.php?g=Conpany&c=Device&a=deviceCz', type:'get', data:data.field, dataType:"json", success:function(data){ if(dat...
  • layui的iframe弹出层表单数据回显

    千次阅读 热门讨论 2020-03-07 19:38:31
    一. 问题背景 父页面:list.jsp 子页面:userEdit.jsp 点击‘编辑’,将数据回显到表单,如下: 二. 解决方案 关键代码如下: layer.open({ type: 2, title: '编辑信息', area: ['750px', '755px'], ...
  • 弹出层中使用form表单时,下拉、单选等不出现的问题
  • layui弹出层在登录中的应用 首先写好登录界面,然后在主界面登录按钮上添加layui弹出层
  • 弹出层提交表单的js layer .open({ type : 2, title : '添加权限', area : [ '500px', '450px' ], offset : '160px', shadeClose : true, // 点击遮罩关闭 btn : ['保存','取消'], ...

空空如也

空空如也

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

layui弹出层form表单提交