精华内容
下载资源
问答
  • 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;&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 表单提交数据为空的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui插件表单验证提交触发提交的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇关于layui表单中按钮自动提交的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 无刷新页面再次操作form表单 时,点击无效果 重点来了!解决方法!...以上这篇layui 解决form表单点击无反应的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 今天小编就为大家分享一篇防止Layui form表单重复提交的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui表单提交到后台自动封装到实体类的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui 图片上传+表单提交+ Spring MVC的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui form表单提交后实现自动刷新,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇解决layui中的form表单与button的点击事件冲突问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 吐槽一下,layui的checkbox简直就是一个坑…(不能提交数组) 数据是从后台来的 <div class=layui-form-item> <label class=layui-form-label>品种 <div class=layui-input-inline> {foreach $quotation_type as $...
  • 今天小编就为大家分享一篇layui实现form表单同时提交数据和文件的代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui表单提交无反应

    千次阅读 2020-11-27 16:32:43
    点击submit时,form.on不被处罚,表单输入框验证项的验证不执行。...//监听提交 form.on('submit(demo1)', function(data){ //save(data); return false; }); 解决办法: 给submit按钮增加 lay-submit="" 即可。

    点击submit按钮时,form.on事件不被触发执行,表单输入框验证项的验证不执行。

    //监听提交
    form.on('submit(demo1)', function(data){
    	//save(data);
    	return false;
    });

     

    解决办法:

    给submit按钮增加 lay-submit="" 即可  (layui官方API对这个属性没有描述)。(不需要填值,如下图)   

    展开全文
  • 前端使用了layui框架,我现在需要在前端提交一个表单到后端保存,正常保存没有问题,现在我添加进来了layedit,使用layedit渲染了textarea,我现在想使用了form监听submit功能,然后手动发起ajax请求完成前后端分离...

    问题描述

    前端使用了layui框架,我现在需要在前端提交一个表单到后端保存,正常保存没有问题,现在我添加进来了layedit,使用layedit渲染了textarea,我现在想使用了form监听submit功能,然后手动发起ajax请求完成前后端分离,就在此时发生了bug,bug代码段如下:

    form.on('submit(submitBtn)', function(data){
                var con = layedit.getContent(index)
                $('#LAY_demo1').val(con);
                if (con===""){
                    layer.msg("文章不能为空!")
                    return false;
                }
                $.ajax({
                    url:"/admin/article/save",
                    type:"post",
                    contentType:"application/json;charset=utf-8",
                    data:JSON.stringify(data.field),
                    success:function (res) {
    
                    }
                })
                return false;
            });
    

    看上去没有错,但是就是因为textarea不能自动获取layedit中的值,需要手动传入,然后就引发了bug,每次提交获取到的都是上一次的值???
    思考了很久认为赋值过程中是不是有异步操作引起了延迟,但是看几遍都认为没有异步,非常奇怪,于是尝试了layui自带的传值到textarea(layedit.sync(index)),效果不出所料,一样bug
    在分析了很久之后判断出了问题,监听接收的data参数不能实时更新导致获取的永远都是上一次的,不出所料,换成了form.val(‘ArticleForm’)的形式来获取form表单,bug消失,代码如下:

    form.on('submit(submitBtn)', function(data){
                var con = layedit.getContent(index)
                $('#LAY_demo1').val(con);
                if (con===""){
                    layer.msg("文章不能为空!")
                    return false;
                }
                $.ajax({
                    url:"/admin/article/save",
                    type:"post",
                    contentType:"application/json;charset=utf-8",
                    data:JSON.stringify(form.val("ArticleForm")),  //此处传值不能通过data获取,否则永远都是赋值之前的,即
                    success:function (res) {
    
                    }
                })
                return false;
            });
    

    总结:监听事件携带的数据,如果修改不能自动获取最新的,是旧的数据,不同于拿地址,而是类似拿的静态数据

    展开全文
  • 今天小编就为大家分享一篇layui form表单提交之后重新加载数据表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui 表单提交两次

    2021-07-19 10:42:00
    1,先展示一下代码 <!...charset=UTF-8" language="java" %> ... 4,最终方案 将 meta.jsp 文件里面的 layui.all.js 引入删除即可 5,其他参考文章 layui 表单提交为什么有两次 layui框架,form提交了两次,问题原因解决

    1,先展示一下代码

    
    <!DOCTYPE html>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <%@ include file="/**/meta.jsp"%>
    <head>
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="${ctx}/static/css/etl.css" />
        <script type="text/javascript" src="${ctx}/static/layui/layui.js"></script>
    </head>
    <body>
    
    
    <form  class="layui-form" action="" id="formfield" >
        <div class=" addwrap">
            <div class="layui-form">
                <input type="hidden" id ="id" name="id"  value="${entity.id}"/>
             
                <div class="layui-form-item">
                    <div class="layui-inline  ">
                        <label class="layui-form-label" >核算日期</label>
                        <div class="layui-input-inline" >
                            <input type="text" class="layui-input" id="costdatatime"  name="costdatatime"  value="${costdata}" placeholder="yyyy-MM"  required lay-verify="required">
                        </div>
                        <div class="layui-form-mid layui-word-aux colorred">*</div>
                    </div>
                </div>
    
                <div class="layui-form-item">
                    <div class="flex flex-jusity-center flex-align-center height26">
                        <div class=" flex  layui-input-block flex flex-jusity-around  tjbtn" style="margin-top: 20px;">
                            <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary qx">取消</button>
                            <button class="layui-btn layui-btn-radius layui-btn-sm " lay-submit lay-filter="formDemo">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    </body>
    <script>
            layui.use(['form','laydate','element'], function() {
                layui.laydate.render({
                    elem: '#costdatatime'
                    ,type: 'month'
                    ,trigger: 'click'
                });
                
                var form = layui.form;
                form.render("select");
                
                form.on('submit(formDemo)', function (data) {
                    $.ajax({
                        url: '/**/save',
                        method:'post',
                        data: data.field,
                        dataType:'JSON',
                        success: function (data) {
                            if(data.success){
                                dLong.layerSuccess(data.msg,function () {
                                    parent.layer.closeAll();
                                    window.parent.search();
                                })
                            }else {
                                dLong.layerError(data.msg,function () {
                                })
                            }
                        }
                    });
                    return false;
                });
            })
    
    
        /*点击取消*/
        $('.qx').on('click', function() {
            parent.layer.closeAll();
        })
    
    
    </script>
    </html>
    
    

    2,毛病出在哪

    因为引入了两次 layui.js,页面被渲染了两次,提交动作也进行了两次。
    在这里插入图片描述

    3,说说我的问题

    在这里插入图片描述
    meta.jsp 文件里面放了我经常需要引入的文件,这样的话每次新编写一个页面,我只需要引入这个jsp页面即可,

    无需写过多的引入,但是正是这种情况,导致我摸索了半天才发现问题。

    4,最终方案

    meta.jsp 文件里面的 layui.all.js 引入删除即可

    5,其他参考文章

    layui 表单提交为什么有两次

    layui框架,form提交了两次,问题原因解决

    展开全文
  • Layui表单提交问题

    2021-01-30 17:31:35
    1、Layui的form表单提交问题 ​ 在提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据。如何解觉这一问题?以下给出我认为便捷的三种方法: 设置button的type=button,否则默认...
  • 今天用layui做了个表单,写完用layer.alert测试,发现提交无效,找了半天也没发现代码哪里有什么错误。最后和官方的示例代码比对,发现就是我写button按钮的地方不一样。开始我自己是这样写的 <button class=...
  • //提交表单 function formSubmit(obj){ dictType1 = $('#dictName option:selected').val(); console.log(dictType1) $.ajax({ type: "POST", data: $.param({'dictType':dictType,'dictName':dictType1})+'&...
  • button type="button" id="BtnSubmit" class="layui-btn btnSubmint" lay-submit lay-filter="demo1">保存</button> 只有采用在js中加上下面任何一段代码即可阻止提交 function stopDefault( e ) { /...
  • document.onkeypress = function (event) { e = event ? event : (window.event ? window.event : null); var currKey = 0; currKey = e.keyCode || e.which || e.charCode; if (currKey == 13) { ...
  • layui表单提交前数据检验

    千次阅读 2019-02-12 15:23:20
    layui自带了一些简单的数据检验,lay-verify,如: &lt;form&gt; &lt;input type="text" name="operatMoney" class="layui-input" lay-verify="required|number&...
  • layui表单提交

    千次阅读 2019-04-16 09:32:28
    // 表单验证以及提交 layui . use ( 'form' , function ( ) { var form = layui . form ; // 字段验证,过滤 form . verify ( { name : function ( value , item ) { //value:表单的值、item...
  • layui表单提交了多次的两个原因

    千次阅读 2020-12-17 11:20:09
    layui表单提交时出现提交多次的原因 1. js文件引用了多次 一般使用layui需要引用layui.js,有的会引用layui.all.js。 如果使用layui默认的表单提交方式,且你的上述js文件同时引用,或者重复引用,那么就会导致表单...
  • 今天小编就为大家分享一篇解决LayUI表单获取不到data的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 表单模块文档:...我们在 UI 上的渲染只要求一点,你必须给表单体系所在的父元素加上class=“layui-form”,一切的工作都会在你加载完form模块后,自动完成。如下是一个最基本的例子: <!DOCTYPE ht

空空如也

空空如也

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

layui表单提交事件