Как сделать так, чтобы страница не переходила при отправке формы

Question

У меня есть страница с достаточным количеством контента, за которой следует форма, состоящая из php + html.

Проблема, с которой я сталкиваюсь, когда пользователь нажимает "Отправить", заключается в том, что страница внезапно прокручивается доверхняя часть страницы (к содержанию, НЕ к форме)

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

Content stuff --> 2. jumps to here

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

Я хотел бы, чтобы страница оставалась , где форма , чтобы я мог обрабатывать информациюи отображать все, что я хочу (скажем, отображение с информацией о подтверждении) без необходимости прокручивать страницу вниз после нажатия кнопки отправки.

С помощью обычных ссылок я обхожу это путем создания якорных тегов, но яЯ не уверен, как решить эту проблему с помощью кнопок отправки ...

Answer 1

вы можете отправить форму через JavaScript, выполнив асинхронный вызов (Ajax), чтобы не нужно было обновлять страницу.

это простой пример (с использованием 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.
});

Обратите внимание, вам понадобится jQuery - если вам не нравится jQuery, вы можете взять его в качестве примера, я просто дам вам идею .. -

Answer 2

Вы пробовали использовать именованные якоря?

Если нет, вот описание с сайта w3schools: named anchors