[英]Bootstrap Modal not closing after submitting the form in it using ajax call?
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.
我试图提交表单而不使用Ajax刷新页面,并且我成功提交了表单,但无法隐藏模式。
Bootstrap Modal With Form in it: 具有表格的Bootstrap Modal:
<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: 上述模式的Ajax代码:
$('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. 弹出Modal后,我会在表格中提供付款的随机卡详细信息,并在提交表格后,使用ajax post call将详细信息发布到db中,并显示警告提示付款成功。 However i am unable to close the modal.
但是我无法关闭模式。 Please do solve this??
请解决这个问题吗?
You must call the hide()
function in order to close your modal. 您必须调用
hide()
函数才能关闭模态。
$.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("");
只需设置
.val("");
won't hide it. 不会隐藏它。
You close a Bootstap modal with 您使用以下命令关闭Bootstap模态
$(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调用后关闭模式,则可以执行以下操作:
$.ajax({
type: "POST",
url: "fund_data.php",
data: payment_data,
success: function(){
$('.payment-alert').delay(1000).show();
$('.modal').modal('hide');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.