当表单操作到同一页面时，保留页面位置？

问题描述：

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

在我当前的项目中，用户点击他们正在编辑的内容的“保存更改”，并且进一步向下弹出编辑框，保存文本等的页面。有没有办法让网站保留其页面位置，以便将它们自动滚动回到他们点击编辑的位置？ p>

理想情况下，我有一些类型的解决方案，其中页面不必重新加载，但我不知道该怎么做，哈哈。 p>

我的网站用PHP编码。 p>

谢谢 p> div>

答

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/

答

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

答

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

答

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?

答

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.

答

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

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

And it works for me.

当表单操作到同一页面时，保留页面位置？

相关推荐