Hi @sebastianpetrovski,
I hope you are doing well today!
One of the ways to achieve this would be by using the IntersectionObserver API in combination with vanilla JavaScript. The IntersectionObserver watches for when elements with a specific CSS class come into and go out of view. Example usage is as follows;
......
document.addEventListener('DOMContentLoaded', (event) => {
var options = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
var observer = new IntersectionObserver(onChange, options);
var elements = document.querySelectorAll('.yourCSSClass');
elements.forEach((el) => {
observer.observe(el);
});
function onChange(changes, observer) {
changes.forEach((change) => {
if (change.intersectionRatio > 0) {
// visible - submit the form
document.forms[0].submit();
// after submitting, no need to observe anymore
observer.unobserve(change.target);
}
});
}
});
.......
Please note that fixing the custom codes provided here is out of our scope of support. We suggest to hire a developer if you need further help on this.
Kind regards,
Zafer
Hi Zafer,
Thanks so much for your guidance! That really helped.
Strangely it wouldn’t work on its own, but when I combined it with a mutation observer as well it worked.
And I discovered the form.submit method appears to work by a hard refresh instead of Ajax and seems to bypasses any behaviour settings in the form.
I guess there’s more things happening in the background and form.submit is like a bruteforce.
So to get back some control I had the hacky idea of simulating a click instead and it seems to work just fine. Very pleasantly surprised.
I’ll paste the code here in case someone else wants to achieve something similar. I’ve placed the code in the footer of my site.
<script>
window.laytheme.on("newpageshown", function () {
// Lay Theme code here
// ...
// Initialize and trigger Forminator-related code
jQuery(document).on('after.load.forminator', function(e, form_id) {
// Function to check for the presence of the "auto-submit-form" class and simulate a click event
function checkForAutoSubmitForm() {
var form = document.forms[0]; // Replace with the appropriate form selector if needed
var elements = document.querySelectorAll('.auto-submit-form');
if (elements.length > 0) {
var options = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
function autoSubmitWhenVisible(entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
// Instead of form.submit(), simulate a click event
var submitButton = document.getElementById("forminator-submit");
if (submitButton) {
var clickEvent = new MouseEvent("click", {
bubbles: true,
cancelable: true,
view: window
});
submitButton.dispatchEvent(clickEvent);
}
observer.unobserve(entry.target);
}
});
}
var observer = new IntersectionObserver(autoSubmitWhenVisible, options);
elements.forEach(function (element) {
observer.observe(element);
});
}
}
// Set up a Mutation Observer to check for changes in the DOM
var observer = new MutationObserver(checkForAutoSubmitForm);
// Configure the observer to watch for child additions to the body
var config = { childList: true, subtree: true };
observer.observe(document.body, config);
// Trigger the initial check
checkForAutoSubmitForm();
});
// Trigger Forminator-related code
setTimeout(function() {
jQuery('.forminator-custom-form').trigger('after.load.forminator');
}, 100);
// ...
});
</script>
