CODEWITHSUNDEEP
htmlforms
redconservatory
redconservatory

Reputation: 21924

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 the 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...

Upvotes: 1

Views: 3523

Answers (2)

Alfrekjv
Alfrekjv

Reputation: 17008

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.. --

Upvotes: 3

DwB
DwB

Reputation: 38300

Have you tried using named anchors?

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

Upvotes: 1

Related Questions