mailchimp 订阅错误消息调整 jquery

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 消息 class，如果我输入空值，将收到 error 消息 class，但它们会叠加彼此之上。我正在尝试找到一种方法，我可以 'refresh' 表单并删除样式，这样它们就不会堆叠

现在我有以下 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');
                }
            });

这只是检查输入的值并在点击时触发。但那是我得到的最远的，因为我不确定如何 "refresh" 表单以便样式可以消失。

这是我的 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() 方法 select 你的两个 div 具有切换效果。

如果有效请告诉我！

mailchimp 订阅错误消息调整 jquery

mailchimp subscription error message tweak jquery

css

jquery

mailchimp