layer获取textarea的值

本文介绍了一个具体的案例,展示了如何通过jQuery与layer.js弹窗插件结合使用来实现一个带有确认与取消按钮的审核拒绝对话框,并通过AJAX发送审核拒绝的数据到服务器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

$('#refuse').on('click',function () {
     layer.open({
        type:1,
        area:['500px','300px'],
        content:$('#refusep').html(),
         shadeClose:true,
         btn:['确认','取消'],
         title:'审核拒绝',
         yes:function (index,layero) {//index 为当前页面索引,layero 为当前页面的DOM,所以可以利用下面的方式获取
             $.ajax({
                 url:'<%=contextPath%>/doctor/refuseApply',
                 type:'post',
                 dataType:'json',
                 contentType:'application/json',
                 data:                      JSON.stringify({
                       id:$("#userId").val(),//获取的内容                         
                       reason:$(layero).find('textarea[name=reason]').val(),
                       state:3
                   })
                 ,
                 success:function (data) {
                     if (data.code=='200'){
 
                         layer.msg("审核成功");
                         layer.close(index);                           
                         var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                         parent.layer.close(index1); //再执行关闭
                     }                        else
                         layer.msg("审核失败");
 
                 },
                 error:function (data) {
                     layer.msg("审核失败");
                 }
             });
         },
         cancel:function (index,layero) {
             layui.layer.close(index);
         }
 
     });
 });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui 弹窗示例</title> <!-- 引入 Layui 样式 --> <link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet"> <style> .modal-title { color: #333333; font-family: Microsoft YaHei; font-weight: bold; font-size: 28px; line-height: normal; letter-spacing: 0px; text-align: center; } .modal-tip { color: #333333; font-family: Microsoft YaHei; font-weight: regular; font-size: 16px; line-height: 30px; letter-spacing: 0px; text-align: center; } .layui-input-block{ margin-left: 0; width: 76%; margin: auto; } .layui-textarea { margin-top: 20px; height: 150px !important; } </style> </head> <body style="padding: 20px;"> <!-- 触发按钮 --> <button class="layui-btn" id="showDialog"> <i class="layui-icon"></i> 显示弹窗 </button> <!-- 引入 Layui JS --> <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script> <script> // 初始化 Layui 模块 layui.use(['layer', 'form'], function(){ var layer = layui.layer; var form = layui.form; // 绑定按钮点击事件 document.getElementById('showDialog').onclick = function(){ // 基础弹窗 layer.open({ type: 1, title: '弹窗标题', area: ['900px', '600px'], content: '<div style="padding:20px;">' + ' <p class="modal-title">中午好,流云!</p>' + ' <p class="modal-tip">输入您的内容主题,让AI为你服务</p>' + ' <form class="layui-form" lay-filter="formDemo">' + ' <div class="layui-form-item">' + ' <div class="layui-input-block">' + ' <textarea name="content" placeholder="发消息、输入@选择技能或选择文件" class="layui-textarea"></textarea>' + ' </div>' + ' </div>' + ' </form>' + '</div>', btn: ['提交', '取消'], success: function(layero, index){ // 重新渲染表单 form.render(); // 监听提交按钮 form.on('submit(formDemo)', function(data){ layer.msg('提交内容:' + JSON.stringify(data.field)); return false; }); }, yes: function(index, layero){ // 手动触发表单提交 var formElem = $(layero).find('form'); formElem.find('button[lay-submit]').click(); }, btn2: function(index, layero){ layer.close(index); } }); }; }); </script> </body> </html>
最新发布
03-11
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值