Scroll to the top of the module after error message.

Hello,

In my submission form (into a module), I have a db read - on found - custom code which is showing a simply error message followed by a Event Loop – load event.

Here below is the code:

<?php $form->errors[] = 'Nella tabella esiste già il nome inserito'; ?>

Now, if an error arise, the page is reloaded but scrolled to the top of the page. This behavior is not good in my case, because the error message is down on the page and not immediately visible using a mobile phone browser (responsive template).
I was wondering if it’s possible to implement the above code, to scroll instead to the top of the module (where the form is), in order help the user to easily see the error message and re-submit the form.

I saw severals some posts regarding similar issues and possible solutions, but nothing worked for me.

Thank you.
Piergiorgio

Hi Piergiorgio,

If you add this code inside a JS action before the "Event loop" then it should scroll the page:

$( document ).ready(function() {
$('html,body').animate({
          scrollTop: $("form_id").offset().top
        }, 1000);
});

The "form_id" should be replaced by your form id, you can check it in the page source code.

Best regards,
Max

Hi Max,

Thank you for your kind answer.

I followed your instructions and included the following code into a js action before the event loop, but no luck.

$( document ).ready(function() {
$('html,body').animate({
scrollTop: $("form-row-multi-11").offset().top
}, 1000);
}); 

Before, I also tried to include an anchor at the top of the form and the modified code, as suggested by jcalvert in the following post, again with no luck...:

https://www.chronoengine.com/forums/posts/t98455/scroll-to-top-of-form-when-form-submitted.html?keywords=thank%20you%20scroll

I Just would highlight that my form is included into a joomla Module. Does it make any difference on the matter?

Thank you.

Regards.
Piergiorgio

Hi Piergiorgio,

The module inclusion is not a problem, but this reference is not correct:

$("form-row-multi-11")

Also there is another small glitch, and please try to use the first field id in your form, example:

jQuery( document ).ready(function($) {
$('html,body').animate({
scrollTop: $("#first_field_id").offset().top
}, 1000);
});

Best regards,
Max

Thank you Max,

Almost there!

The code below is working for me:

jQuery( document ).ready(function($) {
$('html,body').animate({
scrollTop: $("#chronoform-Contatto_Stefy_admin").offset().top
}, 1000);
});

Also the version to use the first field $("#first_field_id") is working...

just one more thing:

When scrolling down to the form, the scrolling action stops exactly at the first field of the form (both versions).
But in this way, the error message, which is immediately above, is not visible and I need to scroll up a bit to see it.
Is there a way to let the scrolling action stop at the error message instead to the first field? A couple of rows above would be enough...

Thank you again, Max
Regards.
Piergiorgio

Hi Piergiorgio,

Please try this:

$("dd.message")

best regards,
Max