как отключить обновление страницы после отправки формы
Отправляем форму без обновления страницы с помощью jQuery
Что мы строим
В этом примере у нас есть простая контактная форма с именем, адресом электронной почты и номером телефона. Форма отправляет все поля в php-скрипт без обновления страницы, используя собственные функции jQuery (это означает, вам не нужно загружать дополнительные плагины, чтобы заставить все это работать.
Если вы обнаружили эту статью без какого-либо предварительного знакомства с jQuery, отличным местом для начала станет статья Джеффри Пута о 15 ресурсах, чтобы начать работу с jQuery From Scratch.
Давайте посмотрим на нашу разметку html. Начнем с нашей базовой html-формы:
Вы могли заметить, что я включил div с id contact_form, который оборачивает всю форму.
Не забудьте добавить этот div к вашей собственной форме, поскольку нам позже понадобится этот оберточный div. Вы
возможно также заметили, что я оставил как действие, так и метод тега формы пустыми. Нам
на самом деле здесь не нужен ни один из них, потому что jQuery позаботится об этом позже.
Я добавил некоторые стили CSS и фоновое изображение из Photoshop, чтобы создать следующую форму:
Следующим шагом в этом процессе является добавление некоторого кода jQuery. Я собираюсь предположить, что вы загрузили jQuery, загрузили его на свой сервер и ссылаетесь на него на своей веб-странице.
Затем откройте еще один новый файл javascript, укажите его в своем html, как и любой обычный файл javascript,
и добавьте следующее:
Мы проверяем, сначала осталось ли поле имени пустым, и если да, тогда мы покажем метку с идентификатором name_error. Затем мы сосредоточим внимание на поле ввода имени, если пользователь
совсем не понимает, что делать дальше! (Я научился никогда не принимать слишком много от пользователей).
Затем мы проверяем, пустое ли это значение, и если это так, мы используем метод jQuery show (), чтобы показать метку с
id «name_error»:
Затем мы помещаем фокус формы обратно в поле ввода с идентификатором «name» и, наконец, возвращаем false:
Обязательно верните false в своем коде, иначе вся форма будет отправлена (что не является
целью этого урока)! Если возвращается false, это не позволяет пользователю продолжать
без заполнения необходимого поля(ей).
Вспомним ранее, мы установили переменную ‘name’ со значением поля ввода с id «name», например:
Мы можем снова использовать это значение «name», а также значения «email» и «phone» для создания нашей dataString:
Я прокомментировал предупреждение, которое иногда использую, чтобы быть уверенным, что я использую правильные значения, которые могут оказаться полезными в этом процессе. Если вы раскомментируете это предупреждение и протестируете свою форму, предполагая, что все дошло до сих пор, вы должны получить сообщение, подобное следующему:
Теперь мы добираемся до нашей главной функции ajax, звезды сегодняшнего шоу. Вот где все происходит, так что обратите сюда
свое пристальное внимание!
Есть более сложные вещи, которые вы можете сделать здесь, кроме отправки электронной почты и сообщения об успешном завершении. Например, вы можете отправить свои значения в базу данных, обработать их, а затем отобразить результаты обратно пользователю. Поэтому, если вы разместили опрос среди пользователей, вы можете обработать их голос, а затем вернуть результаты голосования, без необходимости обновления страницы.
Подведем итог тому, что произошло в нашем примере, чтобы убедиться, что мы все поняли. Мы взяли наши значения формы с помощью jQuery, а затем поместили их в строку следующим образом:
Затем мы использовали jQuery функцию ajax для обработки значений в dataString. После этого
процесс завершается успешно, мы выводим сообщение обратно пользователю и добавляем return false, чтобы наша страница не обновлялась:
Успешная часть скрипта была заполнена некоторым конкретным контентом, который может быть отображен обратно пользователю. Но что касается нашей функциональности ajax, это все, что нужно. Для получения дополнительных параметров и настроек обязательно ознакомьтесь с документацией jQuery по функции ajax. Примером здесь является одна из более простых реализаций, но даже в этом случае она очень эффективна, как вы можете видеть.
Давайте вкратце рассмотрим ту часть кода, которая отображает наше сообщение обратно пользователю, чтобы закончить этот учебник.
Во-первых, мы меняем все содержимое div_control_form (помните, я сказал, что нам понадобится этот div) со следующей строкой:
Затем добавим еще больше контента в div сообщения с помощью jQuery функции append(), и, прежде всего, мы добавим классный эффект, скрыв div с помощью jQuery функции hide(), а затем спрячем все это с помощью функции fadeIn():
Таким образом, пользователь получает следующие данные после отправки формы:
Поэтому, если у вас есть контактная форма на вашем веб-сайте, форма входа в систему или даже более продвинутые формы, которые обрабатывают значения через базу данных и возвращают результаты, вы можете сделать все это легко и эффективно, и, возможно, самое главное, вы повышаете качество работы с вашим сайтом, предоставляя интерактивность без необходимости ждать перезагрузки страницы.
Вывод
Единственное, что я сделал с runonload, на самом деле не имеет никакого отношения к обработке формы. Таким образом, вы можете полностью выполнить функцию ajax без каких-либо дополнительных плагинов. Я использовал runonload, чтобы сфокусировать поле ввода имени при загрузке страницы. Мой опыт заключался в том, что вызов runonload иногда может быть лучшей заменой для собственной функции готовности документа jQuery, и я обнаружил, что это действительно так. По какой-то причине функция focus() не будет работать при загрузке страницы с использованием функции готового документа jQuery, но она работает с runonload, и именно поэтому вы считаете ее частью этого примера. Поэтому, если вы знаете способ сделать это без использования runonload, я был бы рад услышать от вас об этом.
Запретить любую форму обновления страницы с помощью jQuery / Javascript
когда пользователь находится на моей странице, Я не хочу, чтобы обновить страницу.
в любое время, пользователь нажимает Ф5 или кнопка Обновления сверху. Он должен получить предупреждение
вы не можете обновить страницу.
также, если пользователь открывает новую вкладку и пытается получить доступ к тому же url во вкладке prev, он должен получить предупреждение
вы не можете открыть ту же страницу в 2 tabs
в любом случае я могу сделать это с помощью JavaScript или jQuery? Момент очень важен.
7 ответов
пользователю будет предложено сообщение и предоставлена возможность остаться на странице или продолжить свой путь. Это становится все более распространенным. Переполнение стека делает это, если вы пытаетесь перейти от страницы во время ввода сообщения. Вы не можете полностью остановить пользователя от перезагрузки, но вы можете заставить его звучать очень страшно, если они это сделают.
#2 более или менее невозможно. Хотя вы отслеживали сеансы и логины пользователей, вы все равно не сможете гарантировать, что правильно обнаруживаете вторую вкладку. Например, возможно, у меня открыто одно окно, а затем закройте его. Теперь я открываю новое окно. Скорее всего, вы обнаружите это как вторую вкладку, хотя я уже закрыл первую. Теперь ваш пользователь не может получить доступ к первому окну, потому что они закрыли его, и они не могут получить доступ ко второму окну, потому что вы отказываете им.
в самом деле, онлайн система Моего банка старается трудно сделать #2, и ситуация, описанная выше, происходит все время. Обычно мне приходится ждать окончания сеанса на стороне сервера, прежде чем я смогу снова использовать банковскую систему.
вы не можете запретить пользователю обновлять, и вы действительно не должны пытаться. Вы должны вернуться в почему вам нужно это решение, что корень проблемы здесь?. Начните с этого и найдите другой способ решения проблемы. Возможно, вы подробно объяснили, почему вы думаете, что вам нужно это сделать, это поможет найти такое решение.
нарушение основных функций браузера никогда не является хорошей идеей, более 99.999999999% интернета работает и обновляется с F5, это ожидание пользователя, который вы не должны ломать.
хотя это не хорошая идея отключить клавишу F5, вы можете сделать это в JQuery, как показано ниже.
надеюсь, это поможет!
еще в старые времена CGI у нас было много форм, которые запускали различные бэкэнд-действия. Например, текстовые уведомления для групп, задания печати, обработка данных и т. д.
Если пользователь был на странице, которая говорит «Пожалуйста, подождите. Выполнение какой-то огромной работы, которая может занять некоторое время.». Они, скорее всего, попадут в REFRESH, и это будет плохо!
Почему? Потому что это приведет к более медленным работам и в конечном итоге все это затянет.
в решение? Позвольте им делать свою форму. Когда они представят свою форму. Начните свою работу, а затем направьте их на другую страницу, которая говорит им ждать.
где страница в середине фактически содержала данные формы, необходимые для запуска задания. Однако страница ожидания содержит историю javascript destroy. Таким образом, они могут перезагрузить эту страницу ожидания все, что они хотят, и она никогда не будет запускать исходное задание, чтобы начать в фоновом режиме, поскольку эта страница ожидания содержит только данные формы, необходимые для Ждите сами.
надеюсь, что это имеет смысл.
функция уничтожения истории также помешала им щелкнуть назад,а затем обновить.
Он был очень бесшовным и работал отлично в течение многих лет, пока некоммерческая не была свернута.
пример: Запись формы-соберите всю их информацию, и при отправке это запускает ваше бэкэнд-задание.
RESPONSE from form entry-возвращает HTML, который выполняет перенаправление на статическое ожидание страница и/или сообщение / перейти в другую форму (страница ожидания).
Как только они находятся на странице ожидания, они могут нажать кнопку Обновить столько, сколько они хотят, и он никогда не будет порождать исходное задание формы на бэкэнде. Вместо этого ваша страница ожидания должен охватывать META timed обновить себя, чтобы он всегда мог проверить статус своей работы. Когда их работа завершена, они перенаправляются со страницы ожидания туда, куда вы хотите.
Если они вручную обновляются. Они просто добавляют еще одну проверку своего статуса работы.
Отмена повторной отправки формы
Мне часто задают вопросы относительно отмены повторной отправки формы. Например, Вы сделали форму добавления комментария, добавили обработчик на эту же страницу. Затем при добавлении комментария он успешно добавляется, но стоит пользователю нажать F5, как форма будет отправлена ещё раз. А F5 пользователь может легко нажать, если страница будет долго грузиться. В итоге, вместо 1-го комментария будет целых 2, а то и больше. В этой статье я покажу, как этого можно избежать.
Для начала разберём более подробно проблему на примере этого кода:
Нажав на кнопку «Возвести в квадрат«, Вы увидите результат работы скрипта. Но стоит после этого пользователю нажать F5, как скрипт снова будет выполняться. В данном случае, это не так критично, как с добавлением комментарием, однако, зачем нужна лишняя нагрузка на сервер?
А код страницы с формой теперь будет выглядеть так:
Подведу итог того, как отменить повторную отправку формы:
Вот так это делается в простых скриптах. Да и, в сложных, в конечном счёте делается то же самое.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 11 ):
Или написать в форме action=».»
При таком примере писать придется. Редирект убьет все POSTы
А я делал по проще: в форму добавил скрытый input, в котором храниться случайное число генерирующееся php. А также при генерации оно забивается в сессии. Затем при принятии формы сначала проверяется совпадение числа, и если нет совпадения форма не обрабатывается. Это как скрытая капча, которая сама вводиться
Я сделал так: if (isset($_POST[‘knopka’]))
А меня интересует совсем противоположный вопрос! А как зделать чтоб отправка формы продублировалясь три раза с интервалом в секунду! Какой обрабочик нужно добавить в код?
Здравствуйте. Не очень понял как делать. Изучаю Ваш курс основы PHP. Перепроверил код, но все равно при обновлении страницы комментарий дублируется. А у Вас на видео все нормально, без всяких редиректов. Вот сам код:
Добавить запись
Записи в гостевой книге:
Я конечно извиняюсь, но вы сами то запускали, тестили свои скрипты, во первых после нажатия и отправки запроса белый экран, результаты почему то выводятся в консоле, а во вторых это не работает, т.к. при обновлении данные отправляются повторно. Только что проверил!
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Предотвращение обновления страницы при отправке в React
Я пытаюсь создать редактируемую таблицу, которая превратит определенную ячейку в после ее нажатия, а затем запустит метод handleSubmit() после того, как пользователь нажмет клавишу return.
Использование e.preventDefault () в этом случае не работает. Каждый раз, когда я нажимаю клавишу возврата после изменения текста, страница обновляется. Как в этом случае остановить обновление страницы?
3 ответа
Во-первых, давайте заглянем в вашу редактируемую ячейку:
Этот элемент должен отображаться иначе, в зависимости от состояния. Мы можем легко добиться этого с помощью React:
Я не предоставляю весь код, потому что считаю, что компоненты самообъяснимы (и вы можете называть их как хотите, я даю им очень простые имена, чтобы прояснить их цель).
В вашем коде у вас есть это:
Наконец, избегайте подобных действий:
Пересмотрите свой подход, и вам просто не нужно будет делать что-то подобное.
Привет, вы можете использовать его, как показано ниже:
1- я предполагаю, что у вас есть кнопка возврата, как показано ниже, чтобы вы могли отправить взамен, не используя событие отправки формы:
2- я не вижу, где вы запускаете handleSubmit, но отправка формы вызывает обновление, вы должны использовать ajax, если не хотите.
Я предполагаю, что вы хотите достичь чего-то, в чем вы можете редактировать столбцы, изменять или отменять изменения, а затем обновлять вещи по мере необходимости.
Этот пример относится к локальному состоянию, но вы все равно можете сделать это с помощью выборки данных.
Нажмите на «Выполнить фрагмент кода» ниже, чтобы увидеть рабочий пример.
Как отправить форму в php, чтобы она не отправлялась повторно, после обновления страницы
Доброе время суток, уважаемые HABRовчане!
Сегодня тема пойдет об отправке формы на html-страничке, чтобы, при повторном обновлении, она не отправлялась заново в БД.
Не знаю, было ли такое где-то на просторах интернета, но, когда я попыталась найти, а мне было жутко это нужно, причем очень срочно, то я столкнулась с кучей проблем.
Во первых, почти все источники предлагают делать это таким образом:
Но, проблема в нем следующая, если вы, уже где то в начале страницы отправили заголовки, то на вас будут ругаться, мол, «заголовки отправлены, зачем ты хочешь, чтобы я это сделал еще один раз, угомонись!»
Но данные способы были неудобны, возможно, вам покажется, что это наоборот, самый лучший вариант и зачем изобретать велосипед?
Меня же, все способы, встретившиеся на просторах интернета, не устроили. И я решила сделать то, что будет удобно мне и не будет занимать большое количество переменных/времени/ресурсов.
Приступим.
Для начала, создадим простенькую форму.
Затем добавим в форму метод отправки, действие и имя: Действие будет происходить на другой странице, для удобства и дальнейшей функциональности.
Получается вот такой код:
Затем, мы создаем файлик redir.php и работаем над ним:
Все. Как видите это просто, быстро и удобно!