JS 模态框实现保存成功提示

最新推荐文章于 2025-03-26 19:24:21 发布

稚枭天卓

最新推荐文章于 2025-03-26 19:24:21 发布

阅读量5.4k

点赞数

分类专栏： JS入门前台技术文章标签：模态框保存提示关闭当前页

本文链接：https://blog.youkuaiyun.com/u013630349/article/details/53783806

版权

JS入门同时被 2 个专栏收录

30 篇文章

订阅专栏

前台技术

29 篇文章

订阅专栏

本文展示了如何利用JavaScript实现一个模态框，在表单保存成功后弹出提示，并在设定的时间后自动关闭。通过`closest()`方法找到表单，使用`validate()`进行表单验证，`submitHandler`处理表单提交，`post`方法发送数据，`done.cs.form.submit`事件处理返回数据，最后用`setTimeout`延迟隐藏模态框。

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

JS 文件函数编辑示例

$(function(){
    var autoFormSubmit = function(e){
        var _this = $(this);
        // closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上
        var _form = _this.closest("form");
        // 设置提交的
        _form.validate({
                //onclick  : false,
                // submitHandler 之后的函数是通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
                // 说明：当表单通过验证，提交表单。回调函数有个默认参数 form
                submitHandler:function(form,e){
                    // trigger() 方法触发被选元素的指定事件类型
                    // _this 是被选元素 - "before.cs.form.submit" 是事件 - 实际中只需要给这个事件添加不同的处理函数即可
                    // 其中校验是写在事件对应的匿名函数之中
                    _this.trigger("before.cs.form.submit");
                    allModalShow();
                    // 将 action 放于 attr 之上，不要放置在 submit 元素（a 或者 button） 之上
                    // 即 表单的 action 属性值为 url
                    $.post(_form.attr('action'),_form.serialize(),function(data){
                        //after submit call this event.Bind a function on tabContent.
                        // 其中处理的返回值，不同结果对应不同返回值，这也可写在事件对应的匿名函数之中
                        _this.trigger("done.cs.form.submit",data);
                        setTimeout(function(){
                            // layout 大框架的模态框 id 是 myModalAll，其显示时间是 500 ms
                            $('#myModalAll').modal('hide');
                        },500)
                    });
                    return false;
                },
                // 当未通过验证的表单提交时，可以在该回调函数中处理一些事情。该回调函数有两个参数：第一个为一个事件对象，第二个为验证器（validator）
                invalidHandler : function(form){
                    return false;
                }
         });
        //_form.submit();
    }

    $(document).on('click','.autoSubmitForm',autoFormSubmit);
});

function allModalShow(){
    // layout 大框架的模态框 id 是 myModalAll
    $("#myModalAll").modal('show');

}

JSP 函数使用实例

$(function(){
        $("#newAnswerCaseForm").bind("before.cs.form.submit",function(e){
            alert('表单提交之前');
        });
        $("#newAnswerCaseForm").bind("done.cs.form.submit",function(e,data){
            var parsedJson = jQuery.parseJSON(data);
            //alert(parsedJson.msg);
            alert("表单提交之后");
        });
    });

JSP 页面示例

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<div role="main" id="csCustomerDetailInfo">
    <form id="newAnswerCaseForm"  class="autoSubmitForm" action="Case/newChatAnswerCasePostAction">
        <div id="testInfo">
            <div class="panel panel-primary gd-panel">
                <div  class="panel-heading" align="center">
                    <b>new chat</b>
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 100px;">显示名：</span>
                    <input type="input" class="form-control"  name="chatQuickAnswer.name" a-describedby="basic-addon1" style="width:300px;" required>
                </div>
                </br>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1" style="width:100px;">发送内容：</span>
                    <textarea class="form-control" name="chatQuickAnswer.description" rows="3" cols="42"></textarea>
                </div>

            </div>
        </div>
        <a type="submit"  style="margin-left:380px;width: 100px;height:46px;" class="btn btn-lg btn-success" value="保存" />
    </form>
</div>

<script type="text/javascript">

    $(function(){
        $("#newAnswerCaseForm").bind("before.cs.form.submit",function(e){
            alert('表单提交之前');
        });
        $("#newAnswerCaseForm").bind("done.cs.form.submit",function(e,data){
            var parsedJson = jQuery.parseJSON(data);
            //alert(parsedJson.msg);
            alert("表单提交之后");
        });
    });
</script>