Scroll to top of form

Permalink
Hi

I’m wanting to be able to scroll to the top of a form automatically if upon submission there are error messages displayed. Currently unless someone scrolls to the top of the form they may not know.

Any coding suggestions?

View Replies:
OpenWebSolutions replied on at Permalink Reply
OpenWebSolutions
Hi,

I've had the same issue with an external_form. One solution that worked for me in the end was to simply fade out the content above the form (which is wrapped in a div with the id 'wrapper_main') when $success or $error are set:

<?php
    if (!empty($success) || !empty($error)) { ?>
        <script>
            $(function () {
                $('#wrapper_main').fadeOut();
            })
        </script>
    <?php } ?>


Another solution might be to use bootstrap's display properties if $succes or $error are set ('.d-none')?
mnakalay replied on at Permalink Reply
mnakalay
Alternatively, if you're using Express forms, you could have a look at my package Ajax for Express Forms.

Among other things it makes the error messages much nicer and it scrolls to the error (or success) message after submission.

There's a quick video on the market page that shows it allhttps://www.concrete5.org/marketplace/addons/ajax-for-express-forms-...
linuxoid replied on at Permalink Reply
linuxoid
$.ajax({
    ...
})
.done(function(response) {
    if (response['status'] === 'whatever') {
        $('html, body').animate({scrollTop: 0}, 300);
    }
});