• 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: Ajax validation with spinner gif.

Ajax validation with spinner gif. 11 months 1 week ago #43484

  • svarmuza
  • svarmuza's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
Hello, I have implemented your solution you suggested to have spinner appear until form gets redirected to thank you page, but now I have a problem that if all required fields are not filled right, my spinner appears even if there are error alerts.
Could you please help me modify this code, so the spinner appears only when form gets validated that all required fields are filled with right values.
Thanks for your help
Sasa
JFactory::getApplication()->registerEvent('onRsformFrontendAJAXScriptCreate', 'addValidationToForm');
 
function addValidationToForm($args) {
    if ($args instanceof \Joomla\Event\Event) {
        $args = $args->getArguments();
        $args = reset($args);
    }
 
    $script = &$args['script'];
    $formId = $args['formId'];
 
    $script .= <<<EOF
var form = RSFormPro.getForm({$formId});
var overlay, overlayInner, overlayContent, spinner;
var spinnerTimeout;
 
switch (task) {
    case 'beforeSend':
        overlay = document.createElement('div');
        overlay.classList.add('overlay');
        overlayInner = document.createElement('div');
        overlayInner.classList.add('overlay__inner');
        overlayContent = document.createElement('div');
        overlayContent.classList.add('overlay__content');
        spinner = document.createElement('span');
        spinner.classList.add('spinner');
        overlayContent.appendChild(spinner);
        overlayInner.appendChild(overlayContent);
        overlay.appendChild(overlayInner);
        form.appendChild(overlay);
        form.classList.add('overlay__open');
 
        // Set a timeout to remove the spinner after 20 seconds
        spinnerTimeout = setTimeout(function() {
            overlay = document.querySelector('.overlay');
            if (overlay) {
                overlay.parentNode.removeChild(overlay);
            }
            form.classList.remove('overlay__open');
        }, 20000); // 20 seconds (20000 milliseconds)
        break;
 
    case 'afterSend':
        // Clear the timeout when the form is submitted
        clearTimeout(spinnerTimeout);
        break;
 
    case 'onRsformAfterRedirect':
        // Remove the spinner after the redirect
        overlay = document.querySelector('.overlay');
        if (overlay) {
            overlay.parentNode.removeChild(overlay);
        }
        form.classList.remove('overlay__open');
        break;
}
EOF;
}
The administrator has disabled public write access.
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!