layui 对弹窗 form表单赋值

最新推荐文章于 2024-07-11 14:41:38 发布
最新推荐文章于 2024-07-11 14:41:38 发布
阅读量3.5w 收藏 35
点赞数 8
分类专栏： layui 文章标签： layui form表单 表单赋值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lm9521/article/details/84789691
版权

新增 ：弹窗下拉框  赋值    2019.12.1

 

目的： 点击编辑按钮 实现 数据回显到弹出 子页面 表单 内。如下图：

Html 代码：

<body>
  <div class="layui-form" lay-filter="useradmin" id="useradmin">
    <div class="layui-form-item">
      <label class="layui-form-label">用 &nbsp;户&nbsp;名</label>
      <div class="layui-input-inline">
        <input type="text" name="username" lay-verify="required" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
	其它省略...
  </div>
</body>

Js 代码：

 layer.open({
        type: 2
        ,title: '编辑用户'
        ,content: 'xx.html'
        ,maxmin: true
        ,area: ['500px', '450px']
        ,btn: ['确定', '取消']
        ,yes: function(index, layero){
         
        省略...
        }
        ,success: function(layero, index){
     
            // 方式一  其实就是获取的 子页面的 div 	 
            var div = layero.find('iframe').contents().find('#useradmin');  // div.html() div里面的内容,不包含当前这个div
               
             // 方式二  
             var body = layer.getChildFrame('body', index);  // body.html() body里面的内容 
      
              
             /* ---- 附加内容 看看就好  Begin ---- */
            var iframeWindow = window['layui-layer-iframe'+ index]   // 方式一： 得到iframe页的窗口对象
            var iframeWindow = window[layero.find('iframe')[0]['name']];   // 方式二： 得到iframe页的窗口对象
            /* ---- 附加内容 看看就好  End ---- */

            // 测试 ：
            body.find("#username").val("admin");  // 方式一
			   
            div.find("#username").val("admin");  // 方式二  
        }
  });
### 渲染子页面下拉框  2019.12.1 新增

var iframeWindow = window['layui-layer-iframe'+ index];
layero.find('iframe').contents().find('[name="colid"]').val(data_value);

-- colid         select name 值
-- data_value    select option value 值

 

layui 表单数据获取 ： 可参考layui 实例 ： https://www.layui.com/demo/table/operate.html   。

这里建议 form表单 属性名 和 表格的属性名 最好一致， 获取的数据 遍历赋值时，只需一遍操作，避免当表单数据过多时，需要写多个   div.find("# id").val(" ");   

 

程序猿明天
关注
  • 8
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
【Layui】表单赋值 / 取值与任意位置按钮提交表单
德仔
09-20 2129
1.通常表单赋值，通过Jquery赋值，每给标签单独赋值，显得非常笨着，希望直接可以给form表单赋值。key-value方式。2.在v2.7.0之前提交表单，按钮必须在表单内才可以直接获取表单data,如果在任意位置，则需要捕获标签取值，然后组装成对象，序列化对象传入后台，代码量大而且容易出错。
Layui(五) 表单赋值
qq_42142258的博客
01-03 8779
一、目的：选中表格行数据——>弹出iframe层——>显示该员详细信息（包含表格信息） ①、表格数据： ②、iframe层数据：（部门数据正确是因为已经改好了赋值方法，X组数据是错误的，因为职位在表格中并未显示，所以外界不知道是否错误。） 二、问题：表单赋值可以更改输入框数据，但是不能更改动态生成的下拉菜单数据 三、过程： ①、主页面JS： else...
layui 对弹窗 form表单赋值的实现方法
10-16
今天小编就为大家分享一篇layui 对弹窗 form表单赋值的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui的form赋值问题
J
07-28 4002
layui.use(['form', 'layer'], function () { var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功 var layer = layui.layer; // 获取父页面传参 var getParentVule = parent.toChildValue(); var data = getParentVule; console...
【layui表单赋值为空问题查找】
最新发布
handsomepig123_的博客
07-11 353
主表(index.html)弹窗显示表单页面(另外的html)数据给表单赋值，赋值后id字段为空。改成lay-filter=“iurEditForm” 就赋值成功了。
layui给表单赋值
qq_40098572的博客
10-11 4606
$$.ajax({ type: 'get', url: '/Home/GetCanshuData', dataType: 'json', success: function (result) { ...
使用layui前端框架弹出form表单以及提交的示例
10-16
在本文中，我们将深入探讨如何使用layui前端框架来弹出form表单并进行数据提交。layui是一款基于HTML5和CSS3的轻量级前端组件库，它提供了丰富的UI组件和强大的交互功能，使得Web开发更加便捷高效。下面，我们就按照...
解决layui中的form表单与button的点击事件冲突问题
10-18
在开发Web应用时，我们经常会遇到各种前端框架的交互问题，其中之一就是在layui中处理form表单与button点击事件冲突的问题。layui是一个轻量级的前端组件库，它提供了丰富的UI元素和交互功能，包括表单组件和按钮。...
layui实现form表单同时提交数据和文件的代码
10-16
总的来说，layui通过结合`layui-form`和`layui-upload`，实现了在同一个表单中同时提交文本数据和文件的功能。这种做法在Web应用中非常常见，特别是在用户注册、个人资料编辑等场景下。通过合理的HTML结构和...
layui 赋值和获取form表单
leleshuo
09-27 5988
layui 赋值和获取form表单
LayUi数据表格自定义赋值方式
10-16
今天小编就为大家分享一篇LayUi数据表格自定义赋值方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui表单赋值不起作用_解决layer弹出层中表单不起作用的问题
weixin_39666931的博客
12-22 865
如下所示：var html = ''+ '角色名'+ '角色描述'+ '是否启用'+ '提交'+ '';layer.open({type : 0,title : '添加角色',area : [ '500px', '400px' ],shadeClose : true, // 点击遮罩关闭content : html,btn : [ '确认', '取消' ],success : function(i...
使用layui框架时，如何快速为表单赋值？
weixin_52004060的博客
04-02 1670
准备的数据 <form> <input type="text" name="id"> <input type="text" name="username"> <input type="text" name="nickname"> </form> let data={id:1,username:"用户名",niciname:"昵称"} 首先为html的form添加属性,"formInfo"自定义名字 <form lay.
layui表格编辑功能(给iframe弹出层赋值)
不会写后端的前端不是一个好运维。
02-20 4414
layui表格编辑功能(给iframe弹出层赋值)
layui 向弹出框赋值
qq_42899641的博客
05-27 1462
///向弹出框赋值 function detailsInfo(ID, State, Type, MasterName) { //查看详情 layer.open({ type: 2, //title: ['查看详情', 'font-family:微软雅黑;color:white;font-size:18px;background-color:#5bc0de;text-align:left; paddin.
LayUI 表格数据赋值
weixin_42136237的博客
05-09 1141
LayUI 表格数据赋值
layui 弹窗表单赋值
qq_24409681的博客
08-13 2118
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"> <d
layui 父页面向弹出框中的子页面form表单进行赋值
weixin_38728273的博客
03-25 7997
1 ，父页面js layer.open({ type: 2, title: '修改数据', shadeClose: false, shade: 0.8, area: ['60%', '60%'], co...
layui弹出层表单提交
09-14
在layui中，可以使用弹出层来创建表单并进行提交。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui弹出层表单提交</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> </head> <body> <button class="layui-btn" onclick="openForm()">打开表单</button> <!-- 表单弹出层 --> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use('layer', function(){ var layer = layui.layer; function openForm() { layer.open({ type: 1, title: '表单提交', area: ['500px', '300px'], content: ` <form class="layui-form" lay-filter="myForm"> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formSubmit">提交</button> </div> </div> </form> `, success: function(layero, index){ var form = layui.form; // 表单提交监听 form.on('submit(formSubmit)', function(data){ console.log(data.field); // 可以在这里进行提交表单数据的操作 layer.close(index); // 关闭弹出层 return false; // 阻止表单默认提交 }); } }); } }); </script> </body> </html> ``` 在上述代码中，点击"打开表单"按钮后，会弹出一个包含姓名输入框和提交按钮的弹出层。当点击提交按钮时，会触发表单提交监听函数，你可以在该函数中进行表单数据的处理和提交操作。同时，弹出层会被关闭。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值