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

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

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

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

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