我正在尝试使用Ajax进行提交,但遇到了问题,我有两个弹出窗口,一个是#popup-subscribe,另一个是#popup-subscribe-success,我想隐藏第一个弹出窗口订阅并显示第二个弹出窗口。
这是我打开第一个弹出窗口的方式:
<button class="btn btn-round btn-primary mt-1 w-100" data-toggle="popup" data-target="#popup-subscribe">Subscribe Now</button>
第一个弹出窗口是:
<!-- Subscribe PopUp -->
<div id="popup-subscribe" class="popup col-10 col-md-4 p-6" data-animation="slide-up">
<button type="button" class="close" data-dismiss="popup" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<form action="#" method="post" name="form-subscribe" id="form-subscribe">
<h5>Stay Updated</h5>
<p>Latest news direct to your inbox — <mark>no spams</mark>.</p>
<div class="form-group">
<input class="form-control" type="text" name="full_name" placeholder="Your Full Name">
</div>
<div class="form-group">
<input class="form-control" type="email" name="email_id" placeholder="Your Email Address">
</div>
<div class="form-group">
<input class="form-control" type="text" name="cell_no" placeholder="Your Cell Number">
</div>
<button class="btn btn-lg btn-block btn-primary" type="submit">Subscribe</button>
</form>
</div>
第二个弹出窗口是:
<!-- Subscribe Success -->
<div id="popup-subscribe-success" class="popup col-10 col-md-4 p-6" data-animation="slide-up">
<button type="button" class="close" data-dismiss="popup" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5>Stay Updated</h5>
<p id="subscriber_ip"></p>
<p>Latest news direct to your inbox — <mark>no spams</mark>.</p>
</div>
我正在使用的脚本是:
//form-subscription-submit-action
$("#form-subscribe").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "assets/php/ajax_functions.php",
data: $(this).serialize()+"&action=form-subscribe",
dataType: "json",
success: function(data){
if(data.status==1) {
$("#popup-subscribe").hide();
//$("#popup-subscribe-success").find("#subscriber_ip").html(data.subscriber_ip)
$("#popup-subscribe-success").show();
}
}
});
});
第一个弹出窗口被隐藏,但是第二个弹出窗口不可见。