Bootstrap Modal not closing after submitting the form in it using ajax call?

Question

I have a modal which has a form in it. I am trying to submit the form without refreshing the page using ajax and I am successfully submitting the form but I am unable to hide the modal.

Bootstrap Modal With Form in it:

<div class="modal fade" id="exampleModalCenter" role="dialog">
    <div class="modal-dialog modal-dialog-centered">    
    <!-- Modal content-->
    <div class="modal-content">
     <form >
        <div class="modal-body">  
         <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
            <a class="nav-link active" id="pills-home-tab" data-toggle="pill" 
            href="#pills-home" role="tab" aria-controls="pills-home" aria- 
            selected="true">CreditCard/DebitCard</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" id="pills-profile-tab" data-toggle="pill" 
            href="#pills-profile" role="tab" aria-controls="pills-profile" 
            aria-selected="false">Paypal</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" 
            href="#pills-contact" role="tab" aria-controls="pills-contact" 
            aria-selected="false">Quickpay</a>
            </li>
        </ul>  
       <div class='pt-1 pb-1 pl-2 text-danger text-center' id="payment- 
       error">Please enter all  card details!</div>
       <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-home" 
         role="tabpanel" aria-labelledby="pills-home-tab">
        <div class="form-group">
            <label for="amount">Amount</label>
                <div class="input-group">
                 <input type="number" name="amount" id="modal_amount" 
                 class="form-control" placeholder="Enter Donation amount" 
                 autocomplete="amount" value="">
                 <div class="input-group-append"><span class="input-group- 
                 text"><i class="fa fa-money"></i></span></div>

                </div>
            </div>
            <div class="form-group">
             <label for="name">CardHolder Name</label>
                <div class="input-group">
                <input type="text" name="name" class="form-control" 
                placeholder="Enter Name" autocomplete="name" id="modal_name" 
                value="">
                <div class="input-group-append"><span class="input-group- 
                text"><i class="fa fa-user"></i></span></div>

                </div>
            </div>
            <div class="form-group">
             <label for="cardnumber">Card Number</label>
                <div class="input-group">
                <input type="tel" name="cardnumber" class="form-control" 
                 placeholder="Valid Card Number" autocomplete="cc-number" 
                 value="" id="modal_number">
                 <div class="input-group-append"><span class="input-group- 
                  text"><i class="fa fa-credit-card"></i></span></div>

                 </div>
            </div>
            <div class="row">
              <div class="col-7">
                <div class="form-group">
                  <label for="expdate">Expiry Date</label>
                    <div class="input-group">
                    <input type="tel" name="expdate" class="form-control" 
                     placeholder="MM/YY" autocomplete="exp-date" value="" 
                     id="modal_expdate">
                    <div class="input-group-append"><span class="input-group- 
                     text"><i class="fa fa-calendar"></i></span></div>

                    </div>
                </div>
          </div>
          <div class="col-5">
            <div class="form-group">
                <label for="cvv">CVV</label>
                <div class="input-group">
                <input type="password" name="cvv" class="form-control" 
                 placeholder="Enter CVV" autocomplete="cvv" maxlength="3" 
                 value="" id="modal_cvv">
                <div class="input-group-append"><span class="input-group- 
                text"><i class="fa fa-key" ></i></span></div>

                    </div>
                </div>
            </div>
        </div>
     </div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria- 
    labelledby="pills-profile-tab">...</div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria- 
    labelledby="pills-contact-tab">...</div>
    </div>        

    <input type="hidden" name="fundid" id="fundid">                      
   </div>
   <div class="modal-footer">
   <button type="submit" class="form-control btn btn-primary btn-small"  
   name="fundraiser" id="fundraiser">Submit</button>
   </div>
 </form>
 </div>
 </div>      
</div>

Ajax Code for above Modal:

$('document').ready(function(){
    $('#event-error').hide();
    $('.event-alert').hide();
    $('#payment-error').hide();
    $('.payment-alert').hide();
    // fundraiser modal form submission
    $('#fundraiser').click(function(){
    var cardname = $('#modal_name').val();
    var cardnumber = $('#modal_number').val();
    var amount = $('#modal_amount').val();
    var expdate = $('#modal_expdate').val();
    var cvv = $('#modal_cvv').val();
    var fundid = $('#fundid').val();
    var payment_data = 'card-name=' + cardname + '&card-number=' + cardnumber 
    + '&amount=' + amount + '&expdate=' + expdate + "&cvv=" + cvv  + 
    '&fundid=' + fundid;
    if( cardname == "" || cardnumber == "" || amount == "" || expdate == "" 
    || amount == "")
        {
            $('#payment-error').show();
            return false;
        }
        else{

            $.ajax({
                type: "POST",
                url: "fund_data.php",
                data: payment_data,
                success: function(){
                    $('.payment-alert').delay(1000).show();
                }
            });
            $('#modal_name').val("");
            $('#modal_number').val("");
            $('#modal_amount').val("");
            $('#modal_expdate').val("");
            $('#modal_cvv').val("");
            return false;
        }
    });

After Modal pops up, I provide a random card details in the form for the payment and after I submit the form, the details are posted into db using ajax post call and a alert is shown payment successful. However i am unable to close the modal. Please do solve this??

Answer 1

You must call the hide() function in order to close your modal.

$.ajax({
    type: "POST",
    url: "fund_data.php",
    data: payment_data,
    success: function(){
        $('.payment-alert').delay(1000).show();
        $('#exampleModalCenter').modal('hide'); // here you hide the modal
    }
});

Simply setting .val(""); won't hide it.

Answer 2

You close a Bootstap modal with

$(selector).modal('hide');

To hide all modals

$('.modal').modal('hide');

So, if you are wanting to close the modal only on success of the AJAX call, then you would do this:

$.ajax({
    type: "POST",
    url: "fund_data.php",
    data: payment_data,
    success: function(){
        $('.payment-alert').delay(1000).show();
        $('.modal').modal('hide');
    }
});