使用php在ajax请求上隐藏/显示弹出窗口

时间:2018-07-06 03:05:01

标签: javascript php jquery ajax

我正在尝试使用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">&times;</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">&times;</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();
        }
      }
    });
  });

第一个弹出窗口被隐藏,但是第二个弹出窗口不可见。

0 个答案:

没有答案