如何在Laravel上提交表单后关闭Bootstrap Modal

How to close Bootstrap Modal after submit form on Laravel?

本文关键字：Bootstrap Modal 表单提交 Laravel 更新时间：2023-09-26

Im使用引导模式导出excel，但在提交我的模式后未关闭。我必须手动关闭。

<button type="button" id="taxModal" class="btn btn-primary btn-group-xs">INVOICE SUMMARY</button>
<div id="taxesModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">GENERATE TAX INVOICE</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/invoice') }}">
                        {!! csrf_field() !!}
                        <div class="form-group{{ $errors->has('start_date') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">START DATE</label>
                            <div class="col-md-6">
                                <input type="date" class="form-control" name="start_date">
                                @if ($errors->has('start_date'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('start_date') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group{{ $errors->has('end_date') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">END DATE</label>
                            <div class="col-md-6">
                                <input type="date" class="form-control" name="end_date">
                                @if ($errors->has('end_date'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('end_date') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="col-md-3 col-md-offset-3">
                                <button type="submit" class="btn btn-primary form-control" id="btnSubmit" >Submit</button>
                            </div>
                            <div class="col-md-3">
                                <button type="button" class="btn btn-danger form-control" data-dismiss="modal">Close</button>
                            </div></div>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

从我的控制器我成功地生成了Excel文档，但我的模式在提交后没有关闭。我在按钮中厌倦了data-dismiss="modal"，但在提交表单之前模态会关闭。在我的控制器中，我尝试了return rediect();，但它也不起作用。我使用下面的脚本打开这个模式

$(document).ready(function () {
        $("#taxModal").click(function () {
            $("#taxesModal").modal('show');
        });
    });

我的控制器功能

 public function invoice_create()
    {
     $start = Input::get('start_date');
     $end = Input::get('end_date');
    Excel::create('INVOICE SUMMERY', function($excel) use($sum,$tot,$start,$end)    {
$excel->sheet($start.'_'.$end, function($sheet) use($sum,$tot,$start,$end){
})->export('xls');
}}

我的路线：

Route::post('invoice','HvAccountController@invoice_create');

在提交事件中关闭您的模态。

    $(document).on("click","#btnSubmit",function (event) {
        ajaxCall();
    });
    function ajaxCall() {
       $.ajax({
           url : 'example.com',
           type: 'GET',
           success : resData
       })
     }
   function resData(data){
        $("#taxesModal").modal('hide');
   }

您可以使用一些jQuery:

$('#btnSubmit').on("click", function(event) {
    // submit form via ajax, then
    event.preventDefault();
    $('#taxesModal').modal( 'hide' );
});

您只需要编写一个AJAX调用，就可以将表单数据发送到正确的位置进行处理。像这样的东西就可以了：

$.ajax({
      url: "{{ url('/invoice') }}",
      method: "POST",
      data: { //Your data to send - needs to include CSRF token
      }
});