I'm building a CMS for a site with php. I have multiple forms on a page which posts to itself. Every time the page reloads to populate the forms, it displays the top of the page. (like normal) The pseudocode below may illustrate my question better:
<Form 1>(top of page)
bla
bla
bla
</form1>
<Form 2>(middle of page)
bla
bla
bla
</form2>
<Form 3>(bottom of page) (how do i get this to show at the top when the page reloads?)
bla
bla
bla
</form3>
I feel like theres an easy way im not seeing. But its late and its been that kind of day. Thanks in advance to everyone as usual.
You can insert an element with id="idname"
before each form, then include that anchor (#idname
) in the form action.
<div id="form1"></div>
<form action="this_page.php#form1">
...
</form>
<div id="form2"></div>
<form action="this_page.php#form2">
...
</form>
What happens: after form submission, the anchor will be respected scrolling the page to the element with that ID.
Note that, having an empty element just before the form allows to scroll the screen exactly to that point, so, to scroll just before the start of the form.
It's a well-kept secret that you can use the fragment (#
part of a URL) to scroll to any element on a page, not just a
nchors. However, this is done with the id
attribute rather than name
. For example.
<form id="form_1" ...>
...
<form id="form_3" ...>
PHP:
header('Location: ' . $_SERVER['PHP_SELF'] . '#form_3');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With