时间戳

首页 > 解决方案 > Javascript - 表单提交后的确认对话框

javascript - Javascript - 表单提交后的确认对话框

问题描述

我不是 Javascript 奇才，因此需要以下帮助。我有一个弹出窗口要求人们输入他们的电子邮件地址。现在弹窗只是在提交后关闭，这不是一个很好的用户体验。理想情况下，文本栏和提交按钮会消失，取而代之的是简短的评论，例如“谢谢，我们会与您联系”。如果弹出窗口在“N”秒后消失，那就更好了。

截屏

任何人都可以帮忙吗？

    var self = this;
var showDelay = parseInt('[[ bannerShowDelayInMilliseconds ]]' || '0', 10);
setTimeout(function () {
    requestAnimationFrame(function () {
        if (!self.inPreview && "true" == "{{ 'true' if customer.email else 'false' }}") {
            return;
        }
        self.sdk.track('banner', getEventProperties('show', false));
        document.body.insertAdjacentHTML('beforeend', self.html);
        var banner = self.banner = document.querySelector('.exponea-subscription-dialog');
        self.backdrop = document.querySelector('.exponea-subscription-dialog + .exponea-banner-backdrop');
        banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');
        var form = banner.querySelector('form');
        form.onsubmit = function () {
            var eventProperties = getEventProperties('subscribe');
            var email = (form.email.value || '').toLowerCase();
            eventProperties.subscription_email = email;
            self.sdk.track('banner', eventProperties);
            if (validateEmail(email)) {
                self.sdk.update({
                    email: email
            });
        document.getElementById("dialogue").innerHTML = "Thank you message";    
        setTimeout(function(){ removeBanner(); }, 3000);
        }
        return false;
        };
        var btnClose = banner.querySelector('.exponea-close');
        btnClose.onclick = function () {
            removeBanner();
            self.sdk.track('banner', getEventProperties('close'));
        };
    });
}, showDelay);

function getEventProperties(action, interactive) {
    return {
        action: action,
        banner_id: self.data.banner_id,
        banner_name: self.data.banner_name,
        banner_type: self.data.banner_type,
        variant_id: self.data.variant_id,
        variant_name: self.data.variant_name,
        interaction: interactive !== false ? true : false,
        location: window.location.href,
        path: window.location.pathname
    };
}

function removeBanner() {
    if (self.banner) {
        self.banner.parentNode.removeChild(self.banner);
    }
    if (self.backdrop) {
        self.backdrop.parentNode.removeChild(self.backdrop);
    }
}

function validateEmail(email) {
    return email && /^\S+@\S+\.\S+$/.test(email);
}
return {
    remove: removeBanner
};

标签： javascript

解决方案

您可以在另一个容器中插入您的感谢信息，并编写如下内容：

<div id="container">
    <div id="form">
        here is the form and everything that belongs here
    </div>
    <div id="thanks">
        here is the thanks message
    </div>
</div>

有了这个，您可以将感谢 div 的默认样式设置为display: none;在 css 中。如果通过 id 引用 js 中的容器 div，则可以从 js 更改它们的样式。该setTimeout()方法可用于定时关闭对话框，假设它是由removeBanner()函数完成的。您可以添加以下行：

form.onsubmit = function () {
            var eventProperties = getEventProperties('subscribe');
            var email = (form.email.value || '').toLowerCase();
            eventProperties.subscription_email = email;
            self.sdk.track('banner', eventProperties);
            if (validateEmail(email)) {
                self.sdk.update({
                    email: email
                });
                document.getElementById("form").style.display = 'none';
                document.getElementById("thanks").style.display = 'block';
                setTimeout(function(){removeBanner();}, 5000);
            }
            return false;

通过这种方式，您可以获得完全预先定制的感谢信息。

推荐阅读