Forums

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?
 
CarstenJt replied on at Permalink Reply
CarstenJt
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);
    }
});