layer弹出层实现表单提交

js

$("#info_withdraw").on('click', function () {
    //iframe层
    layer.open({
        type: 2,
        title: '申请提现',
        shadeClose: true,
        shade: 0.6,
        area: ['780px', '600px'],
        content: '__URL__/withdraw'
    });
});

html

<include file="Public:header" />


<style>
    body {
        background-color: #FFF;
        height: auto;
    }
</style>

<div id="page-wrapper">
    <div class="container-fluid">

        <div class="row">
            <div class="col-xs-12">
                <div class="panel panel-default">

                    <!-- xs 自动适应  -->
                    <div class="panel-body">
                        <div class="table-responsive col-xs-10">
                            <form class="form-horizontal addForm" method="post" action="withdraw_save" name="form1" id="edit_form" enctype="multipart/form-data">

                                <input type="hidden" name="page" id="page" value="{$page}" />

                                
                                <div class="form-group col-xs-12">
                                    <label class="control-label  col-xs-3  text-right"><span class="control-label required-mark"></span>当前余额:</label>
                                    <span class="col-xs-4 text-left erbi-form-right">¥{$money}</span>
                                </div>

                        
                                <div class="form-group col-xs-12">
                                    <label class="control-label  col-xs-3  text-right">提现金额:</label>
                                    <input class="form-control-erbi col-xs-4" type="number" name="apply_money" id="apply_money" value="" />
                                    <span class="col-xs-5 text-left erbi-form-right">(提现金额不能超过当前余额)</span>
                                </div>


                                <div class="form-group">
                                    <div class="col-xs-2 col-xs-offset-3">
                                        <button type="button" class="btn btn-primary col-xs-8" id="edit_btn">提交</button>
                                    </div>

                                    <div class="clear"></div>
                                </div>
                            </form>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
        </div>
    </div>
</div>

<include file="Public:bottomJs" />

<script>
    $(function () {
        // 定义全局锁
        let lock_flag = false;
        let page = $('#page').val();

        $("#edit_form").ajaxForm({
            dataType: "json",
            success : function(obj){
                if(obj.errno == 0){
                    layer.msg(obj.errdesc);
                    setTimeout(function() {
                        window.parent.location.reload();
                    },2000);
                }else{
                    // 解锁
                    lock_flag = false;
                    layer.msg(obj.errdesc);
                }
                return false;
            }
        });

        $("#edit_btn").on("click", function(){


            // 上锁
            if (!lock_flag) {
                lock_flag = true;
                $("#edit_form").submit();
            }
            return false;
        });


    })
</script>
<include file="Public:footer" />

子页面,用xs来布局,自适应。

posted @ 2020-04-11 11:24  TBHacker  阅读(11454)  评论(0编辑  收藏  举报