Question

嘿伙计们，所以我在这里有这个mailchimp表格

        <div id="mc_embed_signup">
            <form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                <div id="mc_embed_signup_scroll">
                    <div class="mc-field-group form-group">
                        <label for="mce-EMAIL">BE THE FIRST TO GET NOTIFIED WHEN THE WEB APP GOES LIVE</label>
                        <input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL">


                        <input type="submit" value="GET NOTIFIED" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-default">

                        <div id="mce-responses" class="clear">
                            <div class="response success"></div>
                            <div class="response error"></div>
                        </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;" aria-hidden="true">
                        <input type="text" name="b_bc12ead653de8cf1a8d33aaf8_a777cdf5c9" tabindex="-1" value="">
                    </div>
                </div>
            </form>
        </div>
        <!--End mc_embed_signup-->

我的目标是做两件事

当在表单上单击提交按钮时，根据输入的值显示某些样式
如果再次单击该按钮，则删除以前应用的样式。现在，如果我提交表单，邮件将堆叠。因此，如果我输入正确的电子邮件，请获取success消息类，如果我输入空值，则生成error消息类，但它们会相互堆叠。我试图找到一种方法，我可以刷新＆＃39;表单并删除样式，以便它们不会堆叠

现在我有以下jquery代码（不要担心document.ready我有其他代码）

            $("#mc-embedded-subscribe").click(function(){
                if ($('#mce-EMAIL').val() === '') {
                    $('div.error').attr('id', 'mce-error-response');
                } else {
                    $('div.success').attr('id', 'mce-success-response');
                }
            });

这只是检查输入的值并在点击时触发。但那是最远的我得到的原因我不知道如何＆＃34;刷新＆＃34;形式，所以风格可以消失。

这是我的CSS样式

        #mce-error-response {
            display: block;
            float: left;
            width: 444px;
            padding: 10px;
            background-color: #D23434;
            color: #FFF;
            font-weight: 500;
        }

        #mce-success-response {
            display: block;
            float: left;
            width: 444px;
            padding: 10px;
            background-color: #5ba5af;
            color: #FFF;
            font-weight: 500;
        }

Answer 1

使用此JQuery代码：

<script type="application/javascript">
    $(document).ready(function(){

        $("#mc-embedded-subscribe").click(function (e) {
            var clearValues = $('#mce-responses div').siblings().removeAttr('id');
            //e.preventDefault(); uncomment to see effect
            if ($('#mce-EMAIL').val() == '') {
                clearValues;
                $('div.error').attr('id', 'mce-error-response');
            } else {
                clearValues;
                $('div.success').attr('id', 'mce-success-response');
            }
        });
    });

</script>

基本上我每次在该按钮上有一个点击事件时，首先要删除id属性。我正在使用siblings()方法选择你的两个div以获得切换效果。

让我知道它是否有效！

mailchimp订阅错误消息tweak jquery

1 个答案: