Javascript - confirmation dialog after form submission

Question

I am not a Javascript wiz so need some help with the following. I have a popup asking people to type in their email address. Right now the popup just closes after submission, which isn't a nice user experience. Ideally the text bar and the submission button would disappear, and be replaced by a short comment such as "Thanks, we'll be in touch". Even better would be if the popup would then disappear after "N" seconds.

Can anyone help?

    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
};

Answer 1

        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("thankYouIdExample").innerHTML = "Thank you message";    
        setTimeout(function(){ removeBanner(); }, 3000);
        }
        return false;

Just make sure to place the <div id="thankYouIdExample"></div> at the right place. Let me know if it works for you m8

Answer 2

Use setTimeout

https://www.w3schools.com/jsref/met_win_settimeout.asp

https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setTimeout

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
        })
        setTimeout(() => {
            alert("Thatnk You") // you may want to replace it with a own dialogue system
            removeBanner()
        }, 5000) // wait 5000 milliseconds or in other words 5 seconds

    }
    return false
}

Asynchronous version (if you want to return after the 5000 wait):

* only useful if you not directly call the handler

form.onsubmit = async function() {
    return Promise((resolve, reject) => {
        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
            })
            setTimeout(() => {
                alert("Thatnk You") // you may want to replace it with a own dialogue system
                removeBanner()
                resolve()
            }, 5000) // wait 5000 milliseconds or in other words 5 seconds
        }
        else reject()
    })
}

Answer 3

You can insert your thanks message in another container, and write something like this:

<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>

With this, you can set the default style of the thanks div to display: none; in css. If you reference the container divs in js by their ids, you can change their style from js. The setTimeout() method can be used to time the closing of the dialog box, assuming it is done by the removeBanner() function. You can add these lines:

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;

This way you can have a fully pre-customized thanks message.