CODEWITHSUNDEEP
javascriptphptwitter-bootstraplaravel-5
Developer
Developer

Reputation: 175

How to close Bootstrap Modal after submit form on Laravel?

Im export excel using bootstrap modal but after submit my modal not close. i have to manually close.

<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 -->

from my contoller im generating Excel document successfully but my modal not closeing after submit. i tired data-dismiss="modal" in my button but modal will close before submit the form. in my controller i tried return rediect(); that is also dosn't work. im open this modal using below script 

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

    });

My Controller function 

 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');
}}

My Route : 

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

Upvotes: 1

Views: 7553

Answers (2)

prisel
prisel

Reputation: 337

In submit event close your modal.

    $(document).on("click","#btnSubmit",function (event) {
        ajaxCall();
    });

    function ajaxCall() {
       $.ajax({
           url : 'example.com',
           type: 'GET',
           success : resData
       })
     }

   function resData(data){
        $("#taxesModal").modal('hide');
   }

Upvotes: 2

James
James

Reputation: 16339

You can do this with some jQuery:

$('#btnSubmit').on("click", function(event) {
    // submit form via ajax, then

    event.preventDefault();
    $('#taxesModal').modal( 'hide' );
});

You would just need to write an AJAX call to send the form data off to the right place to be processed. Something like this would do the trick:

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

Upvotes: 0

Related Questions