Currently when a user submits the form, they stay on the same part of the page.
If the form is has several fields, pushing the submit button quite far down the page. When the user fails validation, they may not necessarily see the error messages at the top of the form. This would lead to confusing UX.

Comments

Leon Kessler created an issue. See original summary.

leon kessler’s picture

Status: Active » Needs review
StatusFileSize
new1.88 KB

This patch the uses the ScrollTopCommand command.

For some reason, this command is contained within the Views module (even though it's not particularly Views specific functionality). This means we have to add the views_ajax.js to the page in order for it to work (otherwise there will be JS errors).
I've added a soft dependency on the Views module, so that the library and command are only added if it's enabled. It's not the cleanest, but will work for most people (as I can't imagine there will be many sites that will have Views disabled). For those that do not have Views, the functionality will remain as it currently is.

We also have to wrap the success message in the same wrapper, to allow the command to scroll somewhere.

leon kessler’s picture

StatusFileSize
new1.47 KB

New patch which simplifies how the container is added and also accounts for cases where a different selector is being used.

leon kessler’s picture

StatusFileSize
new1.43 KB

One last change. Was actually rendering the element with the 'render_selector' id (which is actually where the element should be replaced).

Got rid of that, and then moved setting up the container to where the $output array is started (think this is a bit clearer).

ziomizar’s picture

Status: Needs review » Reviewed & tested by the community

  • ziomizar committed 41aa92e on 8.x-1.x authored by Leon Kessler
    Issue #2845293 by Leon Kessler: Scroll the user to the top of the form...
ziomizar’s picture

Pushed, Many thanks!

ziomizar’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

riazsaid15’s picture

Thanks for providing Patch.
When I submit the form using ajax in the footer. It scrolls to the top of the page rather than the top of the form.