jquery - 在提交表单之前和之后在灯箱内显示不同的内容

Question

我正在尝试使用 MailChimp 创建一个“谢谢”表单 URL。

看看here单击“订阅”按钮并填写表格。

当用户填写表单并点击“提交”时，灯箱内的内容应该会改变，灯箱本身应该仍然显示，但是现在内容和灯箱本身在您提交后不显示表格。

我还需要将订阅者发送到另一个 URL，否则它将显示默认的“谢谢”页面，并且在 MailChimp.com 的“一般表格”下，我添加了网站 URL。我不确定这是否导致了问题。

我的 html

<div id="1">
  <div id="demo-second">
    <div class="plainmodal-close-second"><i class="fa fa-times"></i></div> <!-- end of plainmodal-close -->
    <h3 class="title">Subscribe to our newsletter</h3>
    <p class="paragraph">Lorem ipsum dolor sit amet</p>
      </br>
      </br>
      <hr id="line-break">
      </br>
      </br>
    <div  class="container">
    <div id="mc_embed_signup">
      <form action="//fantasylab.us10.list-manage.com/subscribe/post?u=d1f6a8e82535d2fcc14bfa66f&amp;id=36a4ce5a35" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
      <div class="left-row">
            <div class="mc-field-group">
              <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="Fullt navn*">
            </div>

            <div class="mc-field-group">
              <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Din e-postadresse">
            </div>
      </div> <!-- end of left-row --> 
          <div class="right-row">
            <div class="mc-field-group">
              <input type="text" name="MMERGE2" class="" value="" id="mce-MMERGE2" placeholder="Telefonnummer">
            </div>

            <div class="mc-field-group">
              <input type="url" value="" name="TES" class=" url" id="mce-TES" placeholder="Din Webside">
            </div>
        </div> <!-- end of right-row -->           

          <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response" style="display:none"></div>
            <div class="response" id="mce-success-response" style="display:none"></div>
          </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

            <div style="position: absolute; left: -5000px;"><input type="text" name="b_d1f6a8e82535d2fcc14bfa66f_36a4ce5a35" tabindex="-1" value=""></div>
                <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
            </div>
      </form> <!-- end of form -->
      </div>  <!-- end of mc_embed_signup -->
    </div> <!-- end of container --> 
 </div>  <!-- end of demo-second --> 
</div> <!-- end of 1 -->

<dv id="2">
  <div id="demo-second-dynamic">
    <div class="plainmodal-close-second"><i class="fa fa-times"></i></div> <!-- end of plainmodal-close -->
    <h3 class="title">Thank you for subscribing!</h3>
    <p class="paragraph">Lorem ipsum dolor sit amet</p>
      </br>
      </br>
      <hr id="line-break">
      </br>
      </br>
 </div>  <!-- end of demo-second -->

jquery

<script type="text/javascript">

$('#mc-embedded-subscribe-form').on('submit',function(e){
e.preventDefault();
e.stopPropogation();

$('#mc-embedded-subscribe').on('click',function(){
if($('#1').css('display')!='none'){
$('#2').show().siblings('div').hide();
}else if($('#2').css('display')!='none'){
    $('#1').show().siblings('div').hide();
}
$('#1').hide(0,function(){
$('#2').show();
}

});

CSS

    #demo-second {
      width: 1024px;
      padding: 20px 40px;
      color: #fff;
      border-radius: 10px;
      display: none;
      font-family: "Open Sans", Helvetica;
    }
    #demo-second:after { /* clearfix */
      content: "";
      clear: both;
      display: block;
    }

    #demo-second-dynamic {
      width: 1024px;
      padding: 20px 40px;
      color: #fff;
      border-radius: 10px;
      display: none;
      font-family: "Open Sans", Helvetica;
    }
    #demo-second-dynamic:after { /* clearfix */
      content: "";
      clear: both;
      display: block;
    }

我该如何解决这个问题？

Answer 1

您并没有阻止表单提交，因此它会在执行您的代码之前重定向页面。

$('#mc-embedded-subscribe-form').on('submit',function(e){
    e.preventDefault();
    e.stopPropogation();
    /* send form data here */

您可以使用 jquery.post() 来发送表单。然后检查结果，然后我会按照以下方式做一些事情

$('#1').hide(0,function(){
    $('#2').show();
}

编辑:

因为您的表单标签中有 target="_blank"，所以您不需要我回答的第一部分，您可以将整个“jquery”部分替换为

<script type="text/javascript">
$('#mc-embedded-subscribe-form').on('submit',function(){
    $('#1').hide(function(){$('#2').show();});
});
</script>