[RESOLVED] Submit form, with out going to the top of the page [HTML]

POC0bob

Is there a way to keep the page from going back to the top when the user clicks a form post button? I have a 'notes' section on my site for the user, about 1/2 way down the site - but I just want it to make the SQL query when they click submit, and print "Notes updated.". It does this just fine, but it scrolls to the top of the page, which is really annoying; Is there a way to make it so it doesn't do this?

Weedpacket

Based only on what you have supplied, I'm going to guess that you're not updating the same page, you're leaving the page and going to a new copy as the result of a submit. In that case a pretty simple approach would be to add an id to the bit of the page you want to be at the top, and include it in the URL you're submitting to by putting it on the end after a "#".

Bonesnap

Submitting the form actually reloads the page, which is what's causing this illusion of jumping to the top of the page. There are 2 things you can do to counteract this.

1) Similar to what Weedpacket suggested, place an anchor tag with a specific name on your page where you want the page "to be" after you submit the form. In the form's action attribute, append #whatever_the_anchor_tag_is.
For example, if the anchor was <a name="notes"></a> then you'd want to append #notes.

2) A little fancier (and more involved) is to use JavaScript (namely jQuery) to make an AJAX call that does what ever the form does. Using this with event.preventDefault() will stop the page from "jumping" to the top.

Good luck!

Weedpacket

Bonesnap wrote:
1) ...

That is what I suggested, except that the "id" attribute is usually a better choice than "name". First, "id" can be used on any element, so you don't need a spurious "<a name='notes'></a>" element. Second, the "name" attribute is absent from the <a> tag in HTML5. See the discussion in
http://www.w3.org/TR/html4/struct/links.html#anchors-with-id (and when it says "older user agents", remember it was written last century; the id attribute didn't exist before HTML4), and the specification in of the <a> element in http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element