layui 表单提交两次

最新推荐文章于 2023-12-21 22:45:48 发布

原创最新推荐文章于 2023-12-21 22:45:48 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

layui 同时被 2 个专栏收录

46 篇文章

订阅专栏

那些年遇到的BUG

35 篇文章

订阅专栏

本文介绍了在HTML页面中由于引用了两次layui.js，从而导致页面渲染和表单提交重复的问题。作者通过分析发现，问题源于meta.jsp文件中包含的通用文件引入。为了解决这个问题，作者提出了删除meta.jsp中layui.all.js的引入作为最终解决方案。此外，还提供了参考文章链接，帮助读者更深入理解layui表单提交的常见问题。

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

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>