Question

我试图创建一个＆＃34;谢谢你＆＃34;使用MailChimp表单URL。

点击＆＃34;订阅＆＃34;查看here。按钮并填写表格。

当用户填写表单并点击“＃34;提交＆＃34;”时，灯箱内的内容应该更改，灯箱本身仍然应该显示，但是现在内容和灯箱本身并没有显示; t在您提交表格后显示。

此外，我需要将订阅者发送到另一个URL，否则它将显示默认值＆＃34;谢谢你＆＃34;页面和＃34;一般表格＆＃34;在MailChimp.com上，我添加了网站网址。我不确定是否会导致问题。

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

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

1 个答案: