精华内容
下载资源
问答
  • layui表单提交

    2018-06-25 15:09:00
    一、layui.form事件监听 语法:form.on('event(过滤器值)', callback); form模块在 layui 事件机制中注册了专属事件,所以当你使用layui.onevent()自定义模块事件时,请勿占用form名。form支持的事件如下: ...

     

    一、layui.form事件监听

    语法:form.on('event(过滤器值)', callback);

    form模块在 layui 事件机制中注册了专属事件,所以当你使用layui.onevent()自定义模块事件时,请勿占用form名。form支持的事件如下:

    event描述
    select 监听select下拉选择事件
    checkbox 监听checkbox复选框勾选事件
    switch 监听checkbox复选框开关事件
    radio 监听radio单选框事件
    submit 监听表单提交事件

    具体详解:http://www.layui.com/doc/modules/form.html

    在项目中暂时用到的为监听submit提交

    基本用法细节如下:

    按钮点击或者表单被执行提交时触发,其中回调函数只有在验证全部通过后才会进入,回调返回三个成员:

    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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    });

    再次温馨提示:上述的submit(*)中的 * 号为事件过滤器的值,是在你绑定执行提交的元素时设定的,如:

    <button lay-submit lay-filter="*">提交</button>     

    你可以把*号换成任意的值,如:lay-filter="go",但监听事件时也要改成 form.on('submit(go)', callback);

    此处还需要注意:

    console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}

    二、实践

    别人的简单实践(重在思路)

    0、要使用layui的模块时,需先加载所需模块

    layui.use(['form'], function(){
        var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
        var $ = layui.$;
    
        //但是,如果你的HTML是动态生成的,自动渲染就会失效
        //因此你需要在相应的地方,执行下述方法来手动渲染,跟这类似的还有 element.init();
        //form.render();
    });

    1、在使用layui的submit 异步提交监听时,一定要在最后加return false

    //提交
        form.on('submit(submitButton)',function (data) {
            var maintenancePlace = JSON.stringify(data.field);
            $.ajax({
                url : '../../baseManage/place/create.action',
                type : 'post',
                dataType : 'json',
                contentType :"application/json",
                data : maintenancePlace,
                success : function (data1) {
                    alert(11111111)
                }
            })
            return false;
        })

    3、再次温馨提示:上述的submit(*)中的 * 号为事件过滤器的值,是在你绑定执行提交的元素时设定的,如:

    <button lay-submit lay-filter="submitButton">提交</button>
    三、自己的实践 
    前端代码输入form框:
    <form class="layui-form " action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名:</label>
            <div class="layui-input-inline">
                <input type="text" name="username" placeholder="请输入用户名" class="layui-input">
            </div>
            <label class="layui-form-label">手机号:</label>
            <div class="layui-input-inline">
                <input type="text" name="mobile" placeholder="请输入手机号" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn search-btn" table-id="userTable" lay-submit="" lay-filter="search"><i class="fa fa-search">&nbsp;</i>查询
                </button>
                <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh">&nbsp;</i>重置</button>
            </div>
        </div>
    </form>
    前端table展示:
    <div class="layui-form ">
        <table class="layui-table" id="userTable" cyType="pageGrid"
               cyProps="url:'/sys/user/list',checkbox:'true',pageColor:'#2991d9'">
            <thead>
            <tr>
                <!--复选框-->
                <th width="1%" param="{type:'checkbox'}">
                    <input type="checkbox" lay-skin="primary" lay-filter="allChoose">
                </th>
                <!--isPrimary:是否是主键-->
                <th width="10%" param="{name:'userId',isPrimary:'true',hide:'true'}">用户ID</th>
                <th width="8%" param="{name:'username',sort:'true'}">用户名</th>
                <th width="8%" param="{name:'nickname'}">姓名</th>
                <th width="8%" param="{name:'roleId'}">所属角色</th>
                <th width="8%" param="{name:'orgId'}">所属部门</th>
                <th width="8%" param="{name:'email'}">邮箱</th>
                <th width="6%" param="{name:'mobile'}">手机号</th>
                <th width="12%" param="{name:'createTime',sort:'true'}">创建时间</th>
                <th width="5%" param="{name:'status',render:'Render.customState'}">状态</th>
            </tr>
            </thead>
        </table>
    </div>
    Layui中js主方法代码:
          searchForm: function () {
                layui.use(['form'], function () {
                    var form = layui.form();
                    //监听提交
                    form.on('submit(search)', function (data) {
                        //获取对应的表格对象
                        var table_id = $(this).attr("table-id");// table_id=userTable
                        var _table = $("#" + table_id);         // 是id
                        //获取表格参数
                        var props = _table.attr("cyProps");     // cyProps="url:'/sys/user/list',checkbox:'true',pageColor:'#2991d9'"
                        if (!props) {
                            return
                        }
                        props = props ? props : "";
                        //将表格参数转为json
                        props = eval("({" + props + "})");
                        var conditions = data.field;
                        $.extend(defaultParam, conditions);     // conditions 合并到defaultParam 中 
                        var R = PageGrid.getData(props.url);    //*获取数据props.url='/sys/user/list'
                        alert("defaultParam=" + defaultParam.username);//defaultParam是对象
                        defaultParam.init=true;
                        PageGrid.setPage(R, _table, props.url); //设置分页
                        return false;
                    });
    
                });
            },
    getData方法:
            getData: function (url) {
                var data;
                $.ajax({
                    url: url,
                    async: false,
                    data: defaultParam,
                    dataType: "json",
                    success: function (R) {
                        if (R.code == 0) {
                            data = R;
                        } else {
                            data = {page: null};
                            alert(R.msg);
                        }
                    }
                });
                return data;
            },

    设置setPage分页

    
    
     setPage: function (R, $grid, url) {
    
                var pageId = $grid.attr("id") + "_page";
                $("#" + pageId).remove();
                //创建分页div
                $grid.after('<div id="' + pageId + '"></div>');
                layui.use(['laypage', 'layer'], function () {
                    var laypage = layui.laypage;
                    laypage.render({
                        elem: pageId
                        , count: R.page ? R.page.totalCount : 0
                        , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                        , jump: function (obj) {
                            var index=Loading.open(1,false);
                            PageGrid.toPage(R,obj, $grid, url);
                            Loading.close(index);
                        }
                    });
                });
    
            },
    
    

    效果:





    转载于:https://www.cnblogs.com/xiaonantianmen/p/9224370.html

    展开全文
  • layui表单提交时出现提交多次的原因 1. js文件引用了多次 一般使用layui需要引用layui.js,有的会引用layui.all.js。 如果使用layui默认的表单提交方式,且你的上述js文件同时引用,或者重复引用,那么就会导致表单...

    layui表单提交时出现提交多次的原因

    1. js文件引用了多次

    使用layui需要引用layui.js,有的会引用layui.all.js。

    如果使用layui默认的表单提交方式,且你的上述js文件同时引用,或者重复引用,那么就会导致表单渲染多次,就会导致表单提交多次的情况。

    // layui监听提交
      form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        })
        return false;
      });
    

    引用的时候,注意不要同时引用layui.js和layui.all.js。如果自己的页面需要引入其他的页面,那么也要注意你需要引入的页面中是否已经引用过layui.js了,避免重复引用。

    2. 触发提交操作的事件出现在<form></form>内

    如果你是通过自己实现触发事件来提交的,那么你触发事件的提交按钮不能再form标签内。

    例如有如下代码

    <form class="form-horizontal layui-form" role="form"  lay-filter="example">
    	<label for="username" class="col-sm-4 control-label">姓名:
            <input type="text" name="username" id="username" value="" class="form-control">
        </label>
    	<button class="layui-btn btn-info" id="submit">提交</button>
    </form>
    <script>
    	$("#submit").click(function () {
            var username = $("#username").val();
            $.ajax(.....);   // 省略ajax提交
        });
    </script>
    

    触发提交事件的按钮是在<form>标签内部的,所以当点击提交之后,也会触发两次提交。

    将提交按钮放到<form>标签外就可以防止多次提交了。

    展开全文
  • 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;&... 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 表单提交不执行ajax的坑

    千次阅读 2018-08-24 10:30:00
    在官方文档2.x里面写的layui Form提交示例,form.on事件获取表单对应的json信息,然后自己ajax提交表单, 但是总是提交失败,一开始以为获取到json信息之后的那个return false已经无用了。没想到就这个return 坑了...

    在官方文档2.x里面写的layui Form提交示例,form.on事件获取表单对应的json信息,然后自己ajax提交表单,

    但是总是提交失败,一开始以为获取到json信息之后的那个return false已经无用了。没想到就这个return 坑了我好一会。

    如果要提交ajax请求必须要在form.on事件的结尾加上return false。 记录一下,下面是代码。

    这个页面的前提是引入了相关的css和js

    <link rel="stylesheet" href="jqueryplugin/layer/src/layui.css">
    <link rel="stylesheet" href="jqueryplugin/layui/src/css/layui.css">
    
    <script src='jqueryplugin/layer/dist/layer.js' type='text/javascript'></script>
    <script src='jqueryplugin/layui/src/layui.js' type='text/javascript'></script>

    layer和layui两个都引入了,然后表单的最后给的一个按钮事件

    <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="updateUser">修改</button>
                </div>
            </div>

     下面是js

    layui.use('form', function() {
                var form = layui.form;
    
                //自定义验证规则
                form.verify({
                    userName : function(value) {
                        if (value.length < 2||value.length>6) {
                            return '请写正确填写姓名';
                        }
                    },
                    pass : [ /(.+){6,12}$/, '密码必须6到12位' ],
    //                 money : [ /^\d+\.\b\d{2}\b$/, '金额必须为小数保留两位' ]
                });
    
                //监听提交
                form.on('submit(updateUser)', function(data) {
                    console.log(typeof data);
                    console.log(data.field);
    //                 return false;                
                    $.ajax({
                        contentType : "application/x-www-form-urlencoded; charset=utf-8",
                        type : "post",
                        url : htmlVal.htmlUrl + "?doEditUser=",
                        data : data.field,
                        dataType:'json',
                        success : function(res) {
                            isTimeOut(res);
                            if (res.errorCode == '0') {
                                layer.alert('更改成功', function(index) {
                                    location.reload();
                                    layer.close(index);
                                })
                            }
                            if (res.errorCode == 'loginName') {
                                layer.alert('登录名已存在!', function(index) {
                                    layer.close(index);
                                    return false;
                                })
                            }
                            if (res.errorCode == 'email') {
                                layer.alert('email已存在!', function(index) {
                                    layer.close(index);
                                    return false;
                                })
                            }
                            if (res.errorCode == 'cellphone') {
                                layer.alert('手机号码已存在!', function(index) {
                                    layer.close(index);
                                    return false;
                                })
                            }
                            if (res.errorCode == 'wrong_email') {
                                layer.alert('email格式错误!', function(index) {
                                    layer.close(index);
                                    return false;
                                })
                            }
                            if (res.errorCode == 'wrong_cellphone') {
                                layer.alert('手机号码格式错误!', function(index) {
                                    layer.close(index);
                                    return false;
                                })
                            }
                        }
                    });
                    //这个return非常重要,防止ajax跳转,去掉的话就不经过ajax了
                    return false;
                });
    
            });

     

    转载于:https://www.cnblogs.com/dayu007/p/9528290.html

    展开全文
  • layui表单提交时出现一闪而过的验证信息的原因  发生“表单提交时出现一闪而过的验证信息”的原因是,同一个html页面中不同form表单的事件过滤器(lay-filter)的值重复,导致表单交叉重复验证。  具体来说就是当...
  • layui 表单重复提交

    2020-04-21 14:10:06
    今天遇到点小bug ,在改一个后台的项目文件,试用layui的from.... 使用return false 阻止表单提交 放弃layui form.on 使用onclick 事件, 以上3种,对我来说没用,最后试用ajax原生态的一招,e.preventDefault() 完...
  • 监听submit提交 首先在layui中监听表单提交事件 form.on('submit(*)', function(data){ console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象 console.log(data.form) //被执行提交的form对象...
  • //提交监听事件 form.on('submit(save)', function(data) { params = data.field; params.id = $("#id").val(); var load = layer.load(2, {shade: [0.3, '#000']}); $.post('${appPath}/back/orderReceiverI.
  • 刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用。问题:1、提交表单,页面自动刷新。出现这样的情况呢,搜索了一下是因为表单提交按钮没有type类型。哪怕是button标签呢,也...
  • 今天用layui中form表单提交,使用了提交监听事件用$.ajax提交,想用弹出层给页面提示效果,可惜弹出层无效,。页面刷新??? 代码如下: layui.use(['form', 'jquery', 'layer'], function () { var form = ...
  • 表单风格分两种:默认风格:什么都不需要设置方框风格:在form元素添加class=“layui-form-pane”;在js中对元素界面操作主要是学习给标签添加样式,在内置模块中主要是学习如何引用模块,对标签的行为操作一、更新...
  • layui使用官方的表单模块form.on('submit(sub)',function (){}) 提交,使用ajax请求向后台请求一个执行结果,根据结果进行处理,出现回调无法执行,并且页面出现了刷新 之前也遇到过这个问题,直接使用将form标签...
  • 之前也遇到过这个问题,直接使用将form标签修改成了div,通过jquery为提交按钮添加点击事件,而不用submit提交表单。 今天在为毕设添加修改密码的功能的时候,再次遇到了这个问题,刚好有点空闲,决定找出真正的...
  • 刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用。 问题: 1、提交表单,页面自动刷新。 出现这样的情况呢,搜索了一下是因为表单提交按钮没有type类型。哪怕是button标签呢,...
  • layui form表单提交后,自动刷新

    万次阅读 2018-11-28 13:29:51
    刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用。 问题: 提交表单,页面自动刷新。 出现这样的情况呢,搜索了一下是因为表单提交按钮没有type类型。哪怕是button标签呢,...
  • 今天使用layui做新增时 在监听提交的回调函数里 发现data里的field没有值 在网上找了半天 一般都说form表单没加样式 ...发现原来是过滤器的名称给错了 应该给的是提交按钮的事件过滤器而不是表单的 真是粗心大意嗷 ...
  • layui阻止表单提交的一个问题

    千次阅读 2018-10-23 15:15:19
    最近使用layui的时候,想阻止表单提交, form.on('submit(*)', function(data){  console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象  console.log(data.form) ...
  • Layui表单验证

    2019-09-08 16:03:55
    1.根据官网打出案例 2.引入Layui路径,修改路径 ...“submit(*)中的 * 号为事件过滤器的值,是在你绑定执行提交的元素时设定的” 零碎知识 1.$(“#id”).serialize() 获取表单参数 $(“#id”).serialize() +’&t...
  • Layui form提交阻止刷新

    万次阅读 2020-08-16 10:45:36
    // 设置表单提交不刷新事件--Start function stopDefault( e ) { //阻止默认浏览器动作(W3C) if ( e && e.preventDefault ){ e.preventDefault(); }else{//IE中阻止函数器默认动作的方式 window....
  • 因为主框架是通过 jquery.html() 来加载页面, 会导致layUI表单提交事件多次触发 ``` // load子页面 window.onhashchange = function () { var surl = location.hash.replace("#", ""); var htmlobj =...
  • 最近再搞layui表单时,发现提交后我把提交按钮禁用了,依然触发提交事件,找了半天发现是我再写表单时把表单按钮写成 div 了,改为 button 就正常了。 修改前代码-禁用后依然触发点击事件 <div class="layui-btn ...
  • 提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据,为防止这一情况,有效的做法是: 在<form>里面,加上 lay-filter=”formConfig” , οnsubmit=”return false” , 其中 ...
  • 提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据,为防止这一情况,有效的做法是:在里面,加上 lay-filter="formconfig" , οnsubmit="return false" , 其中 “formconfig” 为...
  • 提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据,为防止这一情况,有效的做法是: 在&lt;form&gt;里面,加上lay-filter="formConfig" , onsubmit="...
  • 在使用layui v2.5.6 的表单组件时,原生表单组件的校验事件,需要绑定到按钮,在提交时自动触发。 在只需要做校验操作的情况,由于没有提供表单校验方法,处理比较复杂,这里对源码进行了修改,抽离了表单校验逻辑,...
  • 标签,当点击button时自动触发表单提交事件。 同样,Layui的upload上传控件默认自动提交,也可以通过绑定另一个按钮,控制提交。 控件功能不再详述。 综上,最初的想法是,将upload通过绑定form的button,这样,...
  • ayui使用官方的表单模块form.on('...之前也遇到过这个问题,直接使用将form标签修改成了div,通过jquery为提交按钮添加点击事件,而不用submit提交表单。 今天在为毕设添加修改密码的功能的时候,再次遇到了这个问...

空空如也

空空如也

1 2 3 4
收藏数 74
精华内容 29
关键字:

layui表单提交事件