Hello, I would like to display a loading overlay while all the functions in my gform_pre_submission hook are executing, as I have quite a few and it takes about 5 or 6 seconds. So I put a submit event listener that executes a script which modifies the CSS of my overlay to display it. The problem is that the loading overlay appears even if there are errors when I click on submit. Does anyone have a solution?
The script must execute immediately after the form validation.
here a user with exactly the same problem: Javascript HTML How to run function after form validation - Stack Overflow
The script:
document.addEventListener('DOMContentLoaded', function() {
var form = document.getElementById('gform_1'); // Utilisez l'ID du formulaire Gravity Forms
var overlay = document.getElementById('loading-overlay');
if (form) {
form.addEventListener('submit', function(event) {
event.preventDefault(); // Empêche la soumission immédiate du formulaire
overlay.style.visibility = 'visible'; // Affiche l'overlay de chargement
overlay.style.opacity = '1'; // Rendre visible
setTimeout(function() {
form.submit(); // Soumet le formulaire après un léger délai
}, 2000); // Délai en millisecondes (100ms ici)
});
}
});