ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

模态框提交

2022-06-09 18:40:22  阅读:50  来源: 互联网

标签:模态 function obj 提交 form glyphicon modal name


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框-form表单</title>
    <!-- 自适配手机屏幕 initial-scale=1 支持缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ajax</title>
    <!-- 引入 css -->
    <link rel="stylesheet" type="text/css" href="/static/bootstrap3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap-table/dist/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="/static/toastr/toastr.min.css">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap-select/dist1.12.4/css/bootstrap-select.min.css">
    <link href="/static/bootstrap-formvalidation/dist/css/formValidation.min.css" rel="stylesheet">
    <!-- 引入 js jquery必须先引入 -->
    <script type="text/javascript" src="/static/jquery-3.2.1/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="/static/bootstrap3.4/js/bootstrap.min.js"></script>
    <!-- 引入 bootstrap-table 2个 js -->
    <script type="text/javascript" src="/static/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <!-- 引入 boot-box2个 js用作模态框 -->
    <script type="text/javascript" src="/static/boot-box/bootbox.min.js"></script>
    <script type="text/javascript" src="/static/boot-box/bootbox.locales.min.js"></script>
    <!-- 引入toastr js -->
    <script type="text/javascript" src="/static/toastr/toastr.min.js"></script>
    <!-- 引入select js -->
    <script type="text/javascript" src="/static/bootstrap-select/dist1.12.4/js/bootstrap-select.min.js"></script>
    <!-- 引入form表单验证的 js -->

    <script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/formValidation.js"></script>
    <script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/framework/bootstrap.js"></script>
    <script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/language/zh_CN.js"></script>
    <script>
        $.fn.serializeJson = function () {
            var obj = {};
            var arr = this.serializeArray();
            $.each(arr, function () {
                if (obj[this.name]) {
                    if (!obj[this.name].push) {
                        // 判断有没有push方法,如果没有就变Array数组 
                        obj[this.name] = [obj[this.name]];
                    }
                    obj[this.name].push(this.value || '');
                } else {
                    obj[this.name] = this.value || '';
                }
            });
            return obj;
        };

    </script>

</head>
<body>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">新增项目</h4>
            </div>
            <div class="modal-body" >
                <form class="form-horizontal" id="modal-form">
                    <div class="form-group">
                        <label for="project" class="col-md-3 control-label">项目名称:</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" name="project" id="project" placeholder="请输入项目名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="desc" class="col-md-3 control-label">项目描述:</label>
                        <div class="col-md-8">
                            <textarea class="form-control" name="desc" id="desc" placeholder="请输入项目名称"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-default" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="btn-success" type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <!-- 触发模态框 按钮 -->

    <button class="btn btn-success" id="btn_add" data-toggle="modal" data-target="#myModal">新增</button>
</div>

</body>
<script>

    $(function validate_form() {
        $('#modal-form').formValidation({
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                project: {
                    message: '项目名称校验不通过',
                    validators: {
                        notEmpty: {message: '不能为空'},

                    }
                },
                desc: {
                    message: '项目描述校验不通过',
                    validators: {
                        notEmpty: {message: '不能为空'},


                    }
                },


            }
        }) });

    $(function () {
        validate_form('#modal-form');

        //点击确定按钮执行函数
        $('#btn-success').click(function () {
            var bv = $('#modal-form').data('formValidation');
            bv.validate();
            if (bv.isValid()) {
                console.log('检验成功');
                $.ajax({
                    url: '/api/form/',
                    type: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify($('#modal-form').serializeJson()),

                    success: function (result, status, xhr) {
                        console.log("成功" + result +status + xhr);
                        $('#myModal').modal('hide');
                        $('#modal-form')[0].reset();
                        $('#modal-form').data('formValidation').destroy();
                        $('#modal-form').data('formValidation',null);
                        validate_form('#modal-form');

                    },
                    error: function (xhr, status, error) {
                        console.log("失败 " + error)
                    },
                });

            }

        })
    })


</script>
</html>

  

标签:模态,function,obj,提交,form,glyphicon,modal,name
来源: https://www.cnblogs.com/songxuelong/p/16360449.html

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有