Форма PHP в HTML-документе, избегая перенаправления наверх при отправке формы

Question

Я включил php-форму в свой HTML-код и изменил ее с index.html на index.php.Контактная форма работает хорошо и отправляет все.После отправки пользователь получает сообщение «Спасибо. Сообщение отправлено».Однако, когда страница обновляется, она переходит вверх к заголовку, и пользователь должен снова прокрутить вниз, чтобы увидеть сообщение.

Я знаю, почему это происходит.Пару дней назад я включил этот код:

$(document).ready(function(){
$(this).scrollTop(0);
});

Я сделал это, потому что, когда кто-то посещал мой сайт, он был перенаправлен на контактную форму, а страница не загружалась в заголовке.Однако теперь, когда кто-то отправляет сообщение, страница снова прокручивается вверх.Вы знаете какой-нибудь способ избежать этого?Было бы хорошо, если бы пользователь сначала увидел заголовок при посещении веб-сайта, но его следует перенаправить в раздел формы при отправке сообщения.

Спасибо за вашу помощь.

Answer 1

По сути у вас есть два возможных состояния.Первое возможное состояние - когда вы хотите прокрутить вверх, другое - когда вы не хотите прокручивать вверх.Давайте предположим, что вы знаете, какое условие должно быть проверено.В этом случае ваш код будет выглядеть так:

<?php
    if ($condition) {
?>
        //your scrolling JS code
<?php
    }
?>

Теперь, как мы можем определить $condition?идея состоит в том, чтобы сохранить некоторое значение в $_SESSION пользователя, которое будет логическим значением, которое будет определять, нужно ли нам прокручивать или нет.Вы должны проверить, существует ли значение в $_SESSION и, если нет, по умолчанию оно равно true или false (в зависимости от вашей реальной потребности).

Answer 2

Попробуйте это

$('form').submit(function(e)
{
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: "your_page.php",
        data: $('form').serialize(), 
        success: function(response) { /*what to do on response*/ },
    });
});

Здесь я запрещаю отправку по умолчанию с перезагрузкой и отправку сообщения ajax

Answer 3

При использовании jQuery return false выполняет три отдельных действия, когда вы вызываете его:

1. event.preventDefault();
2. event.stopPropagation();
3. Останавливает выполнение обратного вызоваи немедленно возвращается при вызове.

См. jQuery Events: Stop (Mis) Использование Return False для получения дополнительной информации и примеров.

Ref

Answer 4

Оберните этот конкретный блок кода JS PHP, если условие, которое проверяет, не была ли отправлена ​​форма.Например,

<?php if (!$formSubmitted) { ?>

[JS code here]

<?php } ?>

Answer 5

Использовать куки: https://www.w3schools.com/js/js_cookies.asp

$(document).ready(function(){
    if(!getCookie(cname)){
       $(this).scrollTop(0);
    }
});

$( "#formID" ).submit(function( event ) {
    setCookie(cname, cvalue, exdays)
});