单击Mailchimp提交按钮后,在页面上显示div

时间:2019-07-24 16:08:53

标签: javascript jquery

我在静态HTML页面上嵌入了MailChimp表单,我希望具有表单的部分在输入电子邮件并提交后显示“谢谢”消息。

请记住,单击提交表单后,Mailchimp确认页面将在新选项卡中打开。但是在页面上,我想像下面这样一个隐藏的div显示...

preview

我看到的一些示例要求在按钮上添加一个id,但是MailChimp在元素上已经需要一个id。

这里是一个小提琴:https://jsfiddle.net/Seizedev/j3vofubr/7/

<!DOCTYPE html>
<html lang="en">
<body>

<div id="join">
  <form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email">

    <button type="submit" value="subscribe" name="subscribe" id="mc-embedded-subscribe">Subscribe</button>
  </form>
</div>

<div id="success-msg" style="display: none;">
  <p>Thanks for joining! We’ll stay in touch.</p>
  <a class="share-btn" href="">Share</a>
</div>

</body>
</html>

我正尝试通过一个示例使用jQuery

<script>
    $('#btnClick').on('click', function() {
        if ($('#join-tour').css('display') != 'none') {
            $('#success-msg').html($('#success-msg').html()).show().siblings('div').hide();
        } else if ($('#2').css('display') != 'none') {
            $('#join-tour').show().siblings('div').hide();
        }
    });
</script>

0 个答案:

没有答案