精华内容
下载资源
问答
  • Layui监听

    千次阅读 2019-04-30 16:54:54
    刚又通了一道layui的经脉 真好用!! //监听表单单选框复选框选择 form.on('radio', function (data) { console.log(data.value); //得到被选中的值 }); //监听表单下拉菜单选择 form.on('select', function...

    刚又通了一道layui的经脉 真好用!!

    //监听表单单选框复选框选择
    form.on('radio', function (data) {
       console.log(data.value); //得到被选中的值
    });
            
    
    
    //监听表单下拉菜单选择
     form.on('select', function (data) {
       console.log(data.value); //得到被选中的值
    });
    
    
    
    //监听表单复选框选择
     form.on('checkbox', function (data) {
       console.log(data.value); //得到被选中的值
    });
    
    
    //监听表格复选框选择
    table.on('checkbox(demo)', function (obj) {
       console.log(obj);
    });
    
    
    //layui监听input内容变动简单粗暴
    $(function(){
       //输入框的值改变时触发
      $("#inputid").on("input",function(e){
        //获取input输入的值
        console.log(e.delegateTarget.value);
      });
    });
    
    //点击触发监听
    $(document).on('click','.class',function(othis){
    	 var data = othis.currentTarget;
    	 data.remove();
    	 layer.msg('清除成功');
    });
    
    
    

     带注释

    form.on('event(过滤器值)', callback);
    
    //监听checkbox复选
    form.on('checkbox(filter)', function(data){
        console.log(data.elem); //得到checkbox原始DOM对象
        console.log(data.elem.checked); //是否被选中,true或者false
        console.log(data.value); //复选框value值,也可以通过data.elem.value得到
        console.log(data.othis); //得到美化后的DOM对象
    });
    
    //监听switch复选
    form.on('switch(filter)', function(data){
      console.log(data.elem); //得到checkbox原始DOM对象
      console.log(data.elem.checked); //开关是否开启,true或者false
      console.log(data.value); //开关value值,也可以通过data.elem.value得到
      console.log(data.othis); //得到美化后的DOM对象
    }); 
    
    //监听radio单选:
    form.on('radio(filter)', function(data){
        console.log(data.elem); //得到radio原始DOM对象
        console.log(data.value); //被点击的radio的value值
    });
    
    //监听submit提交:
    <button lay-submit lay-filter="*">提交</button>
    form.on('submit(*)', function(data){
        console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
        console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
        console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
        return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    });

     

    监听Select的改变

    
    
    <!-- 不用form 用div也可以 -->
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">下拉选择框</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                    <option value="2">听歌</option>
                    <option value="4">游戏</option>
                </select>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="./layui/layui.js"></script>
    <script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form;
        form.on('select(aihao)',function(data){
            console.log(data);
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
        });
    });
    </script>

     

    展开全文
  • 今天小编就为大家分享一篇layui监听工具栏的实例(操作列表按钮),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui监听开关,自定义传参

    千次阅读 2019-12-06 11:10:33
    layui监听指定开关,自定义传参layui表单使用核心代码(监听开关,提交表单)给表单赋值和取值 layui表单使用 监听开关,提交表单,指定传参 核心代码(监听开关,提交表单) // layui开关div <form class="layui-...

    layui表单使用

    监听开关,提交表单,指定传参

    核心代码(监听开关,提交表单)

    // layui开关div
    <form class="layui-form" action="" lay-filter="example">
    	<div class="form-group">
    	   <label class="col-sm-2 control-label">开关-默认关</label>
    	    <div class="col-sm-5">
    	        <input type="checkbox" lay-filter="switchTest" name="close" lay-skin="switch" lay-text="返卡|返钱"><div class="layui-unselect layui-form-switch" lay-skin="_switch"><em>OFF</em><i></i></div>
    	    </div>
    	</div>
    	<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
        <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
    </form>
    //监听指定开关
    form.on('switch(switchTest)', function(data){
       console.log(data.elem.checked)
       layer.tips('温馨提示:你选择了'+ (this.checked ? '返卡' : '返钱'), data.othis, {
    	    time: 2000,
    	    area: ['auto', 'auto']//这个属性可以设置宽高  auto 表示自动
    	});
    });
    //监听提交
      form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        })
        var datas = data.field;
        var action = data.form.action;
        console.log(data.field.close)
        //修改开关的值on或""
        if(data.field.close == "on") {
            data.field.close = "1";
        } else {
            data.field.close = "0";
        }
        $.ajax({
            url: action,
            data: datas,
            type: "post",
            dataType: "json",
            success: function (data) {
                if (data.statusCode == 200) {
                    layer.msg("编辑成功", {icon: 1, time: 2000}, function () {
                        window.location.href = "";
                    });
                } else {
                    layer.msg('编辑失败', {icon: 2, time: 2000});
                }
            },
            error: function (data) {
                //layer.msg('出错了', {icon: 5, time: 2000});
            }
        });
      	// return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
      });
    

    给表单赋值和取值

    //表单赋值
      layui.$('#LAY-component-form-setval').on('click', function(){
        form.val('example', {
          "username": "贤心" // "name": "value"
          ,"password": "123456"
          ,"interest": 1
          ,"like[write]": true //复选框选中状态
          ,"close": true //开关状态
          ,"sex": "女"
          ,"desc": "我爱 layui"
        });
      });
      
      //表单取值
      layui.$('#LAY-component-form-getval').on('click', function(){
        var data = form.val('example');
        alert(JSON.stringify(data));
      });
       
    
    展开全文
  • Layui监听表单提交事件

    千次阅读 2020-06-09 14:02:35
    <div style="text-align: center;"> <button type="button" lay-filter="login" lay-submit id="login" class="login-btn">登&nbsp;&nbsp;.../button>... layui.use('form', functi.
     <div style="text-align: center;">
        <button type="button" lay-filter="login" lay-submit id="login" class="login-btn">&nbsp;&nbsp;&nbsp;&nbsp;</button>
     </div>
    
      $(function  () {
            layui.use('form', function(){
                debugger;
                //监听提交
                form.on('submit(login)', function(data){
                    var checked = document.getElementById("rememberId");//复选框状态
                    var tokenForm = document.getElementById("tokenForm");//表单的状态
                    debugger;
                    var userName =  $(" input[ name='username' ] ").val();
                    var password =  $(" input[ name='cipher' ] ").val();
                        if(checked.checked){
                        //do something
                        }
            });
        })
    
    展开全文
  • 使用layui监听select下拉框改变事件

    千次阅读 2020-06-23 11:28:25
    2.select标签需添加 lay-filter=" ",该值为要监听的名字 3.form.on必须写在layui.use(){}中 代码 <form action= method="post" enctype="multipart/form-data" class="layui-form"> <div class="layui-...

    注意事项

    1.form标签须添加 class=“layui-form”
    2.select标签需添加 lay-filter=" ",该值为要监听的名字
    3.form.on必须写在layui.use(){}中

    代码

    <form action= method="post" enctype="multipart/form-data" class="layui-form">
      
                <div class="layui-form-item">
                  <label class="layui-form-label">选择框</label>
                  <div class="layui-input-block">
                    <select name="servicelist" lay-filter="all" lay-verify="required">
                      <option value=""></option>
                      <option value="1">123</option>
                     <option value="2">123</option>
                    </select>
                  </div>
                </div>
                
                
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button  class="layui-btn" lay-filter="add" lay-submit="">
                        确定
                    </button>
                </div>
            </form>
    <script>
            layui.use(['form'],function(){
                var form = layui.form;
                form.on('select(all)',function(data){
                    console.log(data)
                });
            })
        
    </script>
    
    展开全文
  • Layui监听事件实现新增功能

    千次阅读 2019-06-27 17:02:20
    要使用layui.layer弹出新增模态框,首先准备好模态框要显示的内容: <div id="modStaff" style="display: none;"> <div class="layui-col-lg9 layui-col-md9 layui-col-sm9 layui-col-md-offset1"> ...
  • lt;div class="layui-input-inline"&gt; &lt;button type="button"...layui-btn layui-btn-primary layui-btn-radius"&gt;选择角色&lt;/button&gt;
  • 添加button按键 button 事件监听 使用util.event作事件监听,并定义函数 定义弹出层 函数实现
  • form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-input-block checkbox-container"> <input lay-filter="checkboxs" type="checkbox" value="9" ...
  • layui-监听表单按钮

    千次阅读 2019-11-15 10:04:38
    监听表单按钮方式一: 注意添加 lay-filter=“editor” <div class="layui-form-item"> <div class="layui-row"> <div class="layui-col-md12 layui-col-lg12" style="text-align: center">...
  • layui 事件监听触发

    千次阅读 2019-05-05 13:35:00
    1:监听select 改变 <!-- 不用form 用div也可以 --> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">下拉选择框</label> <....
  • 一个添加页面,当还在输入框中输入值的时候,不小心按到了回车,按钮监听到了,就自动执行了提交。 解决方法: 给按钮添加一个类型 type="button" 因为它默认类型是type="submit
  • layui form表单元素监听

    千次阅读 2020-01-08 11:08:53
    1、layui官方通用说明,请注意关键词...button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="selectUerDiv">请点我</button> js监听方式:注意元素里面必须加上lay-submit form.on('...
  • layui按钮监听事件-弹出层

    万次阅读 2019-03-22 15:32:50
    备忘, 需要先引入对应的...bottom class="layui-btn" onclick="test1()">弹出层</bottom> <script type="text/javascript"> function test1(){ layui.use('layer', function(){ var layer ...
  • 一、表单的事件监听 先介绍一下几个属性的用法 1、lay-filter 事件过滤器 相当于选择器,layui的专属选择器 2、lay-verify 验证属性 属性值可以是 :required必填项, phone手机号,email邮箱,url网址,number数字...
  • 解决方案 把 form 表单中的 <button></button>标签换成 a 标签
  • layui的change监听事件

    千次阅读 2020-05-20 16:59:05
    关于layui的下拉框的change监听事件 首先** 必须加上 lay-filter=“test” , ** " " ** 中可以随便写,这里添加的是test** , 然后下拉框如下 <label class="layui-form-label" style="line-height: 15px">...
  • 1.在使用layui-form之后我们往往会使用button进行数据的提交,在button中添加lay-submitlay-filter="*" 会绑定提交事件。 lay-submit 无需填写值 绑定触发提交的元素,如button <buttonlay-submitlay-...
  • form class="layui-form" lay-filter="addForm" method="" action=""> <button class="submit disliay-n" lay-submit lay-filter="add">确定</button> </form> <...
  • LayUi之表单监听事件

    千次阅读 2019-12-17 18:59:03
    HTML <!doctype html> <html> <head> <meta charset="utf-8"> <title>layui.form小例子</title>...script src="~/Content/layui/layui.js"></script> ...
  • layui.open监听页面提交

    2020-07-28 22:17:46
    layui.open监听页面提交 $("#addBtn").on('click', function () { layer.open({ type: 2, content: "/add.html" area: ['750px', '400px'], title: '添加', scrollbar: false,
  • layui工具栏按钮监听事件

    千次阅读 2019-06-09 20:06:54
    layui工具栏按钮监听事件
  • layui---事件监听

    2021-01-06 13:44:00
    layui—事件监听 在使用layui的form表单做验证提交的时候,如果结合vue,或者是三级联动的时候,就需要做事件监听了。 具体语法: form.on(‘event(过滤器值)’, callback); 可以用于监听:select,checkbox,switch...
  • <form class="layui-form" lay-filter="example"> <input class="layui-input" type="text" name=...button type="button" class="layui-btn" lay-submit="" lay-filter="demo1"><i class="layu.
  • layui数据表格监听按钮问题

    千次阅读 2019-04-06 15:19:00
    layui官网文档源码原始容器 <table id="demo" lay-filter="test"></table> 工具栏模板: <script type="text/html" id="toolbarDemo">...div class="layui-btn-container">...button class...

空空如也

空空如也

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

layui监听button