Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using anchor tags in conjunction with a form's action attribute

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.

like image 594
NickG77 Avatar asked Dec 28 '22 01:12

NickG77


2 Answers

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.

like image 156
subroutines Avatar answered Dec 29 '22 14:12

subroutines


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 anchors. 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');
like image 43
Explosion Pills Avatar answered Dec 29 '22 16:12

Explosion Pills