How to make the page not jump on form submits

I have a page that has a fair amount of content, followed by a form that consists of php + html.

The problem I am having when the user hits submit is that the page suddenly scrolls UP to 开发者_如何学Gothe top of the page (to the content, NOT the form)

-----------------

Content stuff --> 2. jumps to here

Form
Submit button --> 1. press this button
-----------------

What I would like is for the page to stay where the form is so that I can process the information and display whatever I would like (say, a display with confirmation information) without the user having to scroll down the page after they press the submit button.

With regular links I get around this by making anchor tags but I am not sure how to deal with this issue with submit buttons...

you may want to submit the form through JavaScript by doing an asynchronous call (Ajax) so the page would not need to be refreshed.

this is a simple example (using jQuery):

// this is the id of the submit button
$("#submitButtonId").click(function() {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});

Note, you'll need to have jQuery -- if you don't like jQuery, you can take it as an example, I just give you the idea.. --

Have you tried using named anchors?

If not, here is a description from the w3schools site: named anchors