CODEWITHSUNDEEP
phpjavascriptjqueryhtml
jakecraige
jakecraige

Reputation: 2727

When form action to same page, retain page position?

On my current project, the user clicks on "Save Changes" on what they are editing, and it is further down the page where the edit box, saved text, etc... pops up. Is there a way I can have the site retain its page location in order to auto-scroll them back down to where they clicked edit?

Ideally I'd have some type of solution where the page wouldn't have to reload but I don't know how to do that, lol.

My site is coded in PHP.

Thanks

Upvotes: 3

Views: 13214

Answers (6)

Ales
Ales

Reputation: 441

I have simply put name of ID selector in form action:

<form class="form-horizontal" method="post" action="#regform">

And it works for me.

Upvotes: 2

Buksy
Buksy

Reputation: 12228

If you have multiple forms on one page, you could add name attribute of that form to link. e.g.

<form name="my-form1" action="form.php#my-form1">

I guess this should work.

Another way is to consider using Ajax, so you dont have to reload page at all, or you can create javasscript function that will be called on form submit and will add current page position in hidden input. After page reload, you can scroll to original position using value from that hidden input.

Upvotes: 0

Keval Domadia
Keval Domadia

Reputation: 4763

Yes, it is good to have that approach.

Rather than complete redirection, only a chunk of data should be sent over and uploaded accordingly.

For this, you need http://www.w3schools.com/ajax/default.ASP

then, learn jQuery (hope you familiar with what is an id and class in CSS)...

http://api.jquery.com/jQuery.ajax/

Cool?

Upvotes: 0

K D
K D

Reputation: 5989

There is one functionality in Html to position your page with the help of using (#).

For example considering the following scenario where your Edit button resides

<div id="editButton">
 <input type="button" name="Edit" value ="Edit"/>
</div>

If your page name is "index.php" and you redirect with url : "index.php#editButton" Your page will automatically scroll to that section without much efforts.

It identifies the id of the element and put the scroll up to that position.

Cheers

Upvotes: 5

OakNinja
OakNinja

Reputation: 2346

Yes, use Ajax to update the page partially. This is the way to do it in any web technology.

Upvotes: -1

sjdaws
sjdaws

Reputation: 3536

You might want to have a look at some tutorials on how to save a form via AJAX. This will mean you aren't POSTing the page, and therefore it won't refresh and the user won't lose their position on the page.

http://www.jstiles.com/Blog/How-To-Submit-a-Form-with-jQuery-and-AJAX
http://www.devblog.co/easy-jquery-ajax-php-contact-form/

Upvotes: 2

Related Questions