Перейдите к форме после подачи

Question

Это может показаться простой проблемой, но я застрял на этом. Надеюсь, что кто-нибудь может помочь мне в этом

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

<?php include('process_form.php'); ?>
<form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>">
    <div class="form-row">
        <div class="col form-group">
            <label>Primeiro nome</label>
            <input type="text" class="form-control" title = "Inserir nome"  name="firstname" value="<?php echo $firstname ?>">
            <span class="error"><?php echo $firstnameErr ?></span>

Answer 1

Если я понимаю ваш вопрос, вы спрашиваете довольно много только из HTML и PHP.Помните, что после отправки формы браузер отходит от текущей страницы и загружает страницу действия формы (в вашем случае он перезагружает текущую страницу в соответствии с директивой action="<?php $_SERVER['PHP_SELF']; ?>".

Итак, как быВы располагаете страницу точно в нужном месте, если не было отправки формы? Вот как вы бы это сделали в этом случае. Поэтому, как предлагается в комментариях, вы можете изменить директиву действия: action="<?php $_SERVER['PHP_SELF']; ?>#id_of_form_container". Например,, если ваша форма имеет структуру div, подобную этой:

<div id="contact_form_div">
    <form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>">

, тогда ваш тег действия будет:

action="<?php $_SERVER['PHP_SELF']; ?>#contact_form_div"

В качестве альтернативы, вы можете провести базовое тестирование валидности формы в javascriptсторона, во время процесса отправки формы. Если, например, обязательное поле не заполнено, вы можете return false; - что остановит процесс отправки и вернет управление пользователю.

Вот пример того, как выглядит базовая проверка поля javascript. И здесь приведен пример использования javascript / jQuery для прерывания формы submit proВыполните эту проверку и верните управление пользователю (через return false;), если проверка не пройдена.

Ссылки:

Статья MDN по проверке формы - обратите внимание на ссылки SmashingMagazine навнизу

TutorialsPoint - более краткий пример того же

Видеоурок того же самого (30 минут)