Genestial

Forum Replies Created

Viewing 3 posts - 1 through 3 (of 3 total)
Aug 19, 2024 at 12:08 pm
#198134
Participant
Genestial
OP

Hi all,
I managed to patch the issue by adding an observer to detect changes on the response output div and then decoding its contents back to html elements. This resolves the issue in Chrome and other browsers. Note that on Firefox we did not face this issue.

Hope this helps!

<script>
document.addEventListener('DOMContentLoaded', function() {
	//Decodes HTML entities 
	function decodeEntities(str) {
        var textarea = document.createElement('textarea');
        textarea.innerHTML = str;
        return textarea.value;
    }
	
	//Updates contents of the target HTML element 
    function updateContent(target) {
        if (target) {
            target.innerHTML = decodeEntities(target.innerHTML);
        }
    }
	
	//Select the div where the thank you message is printed
    var targetNode = document.querySelector('.wpcf7-response-output');
	
	//Add an observer to observe when the div contents change
    var observerConfig = { childList: true, subtree: true, characterData: true };

    var observerCallback = function(mutationsList, observer) {
        for (var mutation of mutationsList) {
            if (mutation.type === 'childList' || mutation.type === 'characterData') {
                updateContent(mutation.target);
                observer.disconnect();	//Disconnect observer to prevent infinite loop when this change is applied
            }
        }
    };

    var observer = new MutationObserver(observerCallback);

    if (targetNode) {
        observer.observe(targetNode, observerConfig); //Start observing the target node
    }

	//Reconnect the observer after the form submission
    document.addEventListener('wpcf7mailsent', function() {
        if (targetNode) {
            observer.observe(targetNode, observerConfig);
        }
    }, false);
});
</script>
Aug 19, 2024 at 8:29 am
#198113
Participant
Genestial
OP

Hi, I am also experiencing the same issue. After completing the form, the html code of the button appears on the screen, instead of the button itself. Any solutions?

Jun 5, 2022 at 4:10 pm
#172841
Participant
Genestial
OP
This reply has been marked as private.
Viewing 3 posts - 1 through 3 (of 3 total)