Question

我在这里使用以下代码：https://codepen.io/akashnimare/pen/XMozEo通过AJAX在Mailchimp上实现新闻通讯注册。

效果很好，现在我尝试添加另一个复选框，必须先选中该复选框，然后用户才能订阅，但是它无法正常工作。

这是我到目前为止的代码：

<div class="c-subscribe">
    <form action="https://press.us16.list-manage.com/subscribe/post-json?u=163e8e3f44172dc6f5a2e12f8&amp;id=b92bdaa70b&c=?"
          method="get" id="c-subscribe__form" name="c-subscribe__form" class="validate">
        <input type="hidden" name="u" value="163e8e3f44172dc6f5a2e12f8">
        <input type="hidden" name="id" value="b92bdaa70b">
        <input type="email" value="" name="EMAIL" class="email" id="c-subscribe__e-mail" name="MERGE0" id="MERGE0"
               placeholder="einwunderbarer@mensch.de" required>
        <input type="checkbox" id="c-subscribe__gdpr" name="c-subscribe__gdpr" value="">
        <div style="position: absolute; left: -5000px;" aria-hidden="true">
            <input type="text" name="b_e44c1f194bec93e238615469e_f6f826e769" tabindex="-1" value="">
        </div>
        <input type="submit" value="subscribe" name="subscribe" id="c-subscribe__button">
        <div id="c-subscribe__result">
        </div>
    </form>
</div>

$(document).ready(function () {
        var $form = $('#c-subscribe__form');
        if ($form.length > 0) {
            $('form input[type="submit"]').bind('click', function (event) {
                if (event) event.preventDefault()
                register($form)
            })
        }
    });

    function register($form) {
        $('#c-subscribe__button').val('Sending...');
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),
            cache: false,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            error: function (err) {
                alert('Could not connect to the registration server. Please try again later.')
            },
            success: function (data) {
                $('#c-subscribe__button').val('subscribe')
                if (data.result === 'success') {
                    // Yeahhhh Success
                    console.log(data.msg)
                    $('#c-subscribe__e-mail').css('borderColor', '#ffffff')
                    $('#c-subscribe__result').css('color', 'rgb(53, 114, 210)')
                    $('#c-subscribe__result').html('<p>Thank you for subscribing. We have sent you a confirmation email.</p>')
                    $('#c-subscribe__e-mail').val('')
                } else {
                    // Something went wrong, do something to notify the user.
                    console.log(data.msg)
                    $('#c-subscribe__e-mail').css('borderColor', '#ff8282')
                    $('#c-subscribe__gdpr').css('borderColor', '#ff8282')
                    $('#c-subscribe__result').css('color', '#ff8282')
                    $('#c-subscribe__result').html('<p>' + data.msg.substring(4) + '</p>')
                }
            }
        })
    }

现在这可以正常工作了。

我现在尝试在此处添加此行以使此复选框成为必需。

document.getElementById("c-subscribe__gdpr").required = true;

但是现在成功显示在新窗口中。我不确定如何解决这个问题。

Mailchimp AJAX订阅无法与其他必填复选框一起使用

0 个答案: