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

Добавил пользователь Skiper
Обновлено: 05.10.2024

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

вы действительно должны использовать шаблон Post Redirect Get для обработки этого, но если вы каким-то образом оказались в положении, когда PRG нежизнеспособен (например, сама форма находится в include, предотвращая перенаправления), вы можете хэшировать некоторые параметры запроса, чтобы сделать строку на основе содержимого, а затем проверить, что вы ее еще не отправили.

довольно верный способ реализовать уникальный идентификатор в пост и кэшировать его в

тогда в вашем коде сделайте следующее:

  1. нет перенаправления
  2. нет re POST данные при обновлении страницы (F5)
  3. нет re POST при переходе на предыдущую/следующую страницу через историю браузера
  1. Setup NextPage заголовок вместо Location
  2. отображать результат обработки POST форма данных, как это будет отображаться для GET запрос post/redirect/get pattern
  1. настройки window.location С NextPage стоимостью
  2. когда пользователь обновит страницу, браузер будет вести переговоры GET запрос NextPage вместо re POST данные формы

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

после вставки его в базу данных, вызовите метод unset () для очистки данных.

unset ($_POST);

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

заголовок ('Location:'.$_SERVER ['PHP_SELF']);

  • на стороне клиента

    • отключить кнопку отправки, как только клиент нажмет на нее
    • если вы используете Jquery:Jquery.один
    • использование дифференцировать на основе хэширования timestamp / timestamp, когда запрос был отправлен.
    • токены Userequest. Когда основная загрузка назначает временный запрос tocken, который при повторении игнорируется.

    Я использую эту строку javascript, чтобы заблокировать всплывающее окно с запросом на повторную отправку формы при обновлении после отправки формы.

    просто поместите эту строку в нижний колонтитул вашего файла и увидеть магию

    другой вариант будет хранить в сеансе, если текст должен быть записан в вашу базу данных SQL следующим образом:

    Как говорили другие, невозможно выйти из использования post/redirect/get. Но в то же время это достаточно легко сделать, что вы хотите сделать на стороне сервера.

    на странице POST вы просто проверяете пользовательский ввод, но не действуете на нем, вместо этого вы копируете его в массив сеанса. Затем вы снова перенаправляетесь на главную страницу отправки. Ваша главная страница отправки начинается с проверки наличия массива сеансов, который вы используете, и если да, то скопируйте его в локальный массив и снимите его. Оттуда вы можете действовать на него.

    таким образом, вы только делаете всю свою основную работу один раз, добиваясь того, что вы хотите сделать.

    Я искал решение, чтобы предотвратить повторную отправку в огромный проект после этого. Код очень хорошо работает с $_GET и $_POST, и я не могу изменить поведение элементов формы без риска непредвиденных ошибок. Итак, вот мой код:

    Пусть у нас есть некоторая форма, отправляющаяся на текущую страницу:

    Давайте сделаем так, чтобы после отправки введенные данные не пропадали из нашего инпута:

    Такой подход, однако, не совершенен - при первом заходе на страницу PHP выдаст ошибку из-за того, что $_GET['test'] не существует.

    Для решения проблемы добавим условие:

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

    Значение по умолчанию

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

    Для решения этой задачи нам необходимо добавить блок else в наше условие и в этом блоке вывести значение по умолчанию:

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

    Сократим код

    Полученный нами код очень уж длинный. Давайте его сократим. Для начала вместо if используем тернарный оператор:

    А теперь используем сокращенный вариант PHP скобки:

    А теперь используем оператор ?? , который сократит код еще больше:

    С помощью трех инпутов спросите у пользователя год, месяц и день. После отправки формы выведите на экран, сколько дней осталось от введенной даты до Нового Года. По заходу на страницу сделайте так, чтобы в инпутах стояла текущая дата.

    Так же рассмотрим, какие могут быть интересные варианты событий после отправки формы CF7 в pop-up окне, то есть во всплывающем окне. Как сделать такую форму, я описывал в статье Как сделать форму обратной связи во всплывающем окне для WordPress.

    Список пользовательских DOM событий для Contact Form 7

    Обработчик событий wpcf7submit

    Приведенный ниже код представляет собой простой пример регистрации обработчика событий. В этом примере функция прослушивает wpcf7submit событие и просто выдает предупреждение, когда событие происходит.

    Как вы видите в примере, вы используете addEventListener() для регистрации функции обработчика событий. Имейте в виду, что целью события ( wpcf7Elm в примере) является не form элемент, а его родительский div элемент, имеющий класс wpcf7 .

    Поскольку все wpcf7* события всплывают через дерево DOM к корню документа, если вам не нужно устанавливать конкретную цель события, вы можете упростить ее, установив document свойство в качестве цели события:

    Данные, вводимые пользователем через нужную контактную форму, передаются в обработчик события как detail.inputs свойство объекта события. Структура данных detail.inputs является массивом объектов, и каждый объект имеет name и value свойство.

    Это пример доступа к введенному пользователем значению через поле “your-name”:

    Существуют также другие свойства объекта события, которые вы можете использовать в своем обработчике событий.

    Например, если вы хотите сделать что-то только с определенной контактной формой (ID = 123), используйте detail.contactFormId свойство, как показано ниже:

    Например, такой скрипт для открытия модального окна с id="popup-success" после успешной отправки формы:

    Выводим поп-ап окно “Спасибо за заказ”, при этом само окно находится в блоке с id , внешний вид и стили нужно будет оформлять под свой дизайн, чтобы все было красиво + сделать кнопку ‘Закрыть’ окно благодарности.

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

    Для кнопки “Закрыть окно” добавляем такой код в файл скриптов:

    Если у вас несколько форм, тогда для каждого ID формы можно создавать свои события:

    id – это номер формы
    $.magnificPopup.open – в данном примере используется Magnific Popup

    У многих возникают сложности с данным моментом, поэтому решил его все же вынести в статью.

    Данный скрипт выведет на экран окно id='popup-success' после успешной отправки одной из форм (id == 17754 или 17758 или 17757):

    Простой разбор кода

    id == 17754 || 17758 || 17757 – окно будет показываться только для этих форм (или-или).

    Если скрипт вы добавляете не в файл скриптов, а в футер или редактор js-кода, тогда оберните его в данный код:

    Как сделать скачивание файла pdf после заполнения формы c помощью плагина Contact Form 7

    Открываем pdf-файл сразу на этой же странице

    Открываем pdf на новой странице

    Редирект на другую страницу после успешной отправки формы

    Теперь для редиректа на другую страницу после успешной отправки формы нужно также использовать событие wpcf7mailsent . Пример точно такой же как и с открытием файла.

    Открыть новую страницу в новой вкладке после отправки формы:

    Рекомендую к прочтению:

    Комментарии (43) к “Действия после успешной отправки формы CF7”

    Ирина

    при этом само окно находится в блоке с
    Подскажите, а где должен быть сам блок?

    Denis Creative

    Обновил немного статью – вот ссылка

    Дмитрий

    Добрый день ! Подскажите как засунуть свой “див” в “алерт” ?

    Есть кнопка с красивой всплывающей формой на странице я её скрываю “дисплей ноне” и хотелось бы что бы эта же форма всплывала после отправки формы нажатием кнопки отправки в сонтакт форм 7

    Использую “Modal” из визуала композера, отличная вещь только нуждается каждый раз в доработке :(

    Сергей

    Denis Creative

    Действительно, статью перепишу.
    Теперь нужно использовать скрипт:

    Метод, использующий on_sent_ok hook , больше не рекомендуется. Эта функция будет отменена к концу 2017 года.

    vadim

    куда вставить этот скрипт чтобы после заполнения формы отправлялся файл?

    Denis Creative

    Или в основной скрипт, который использует шаблон, или в футер.

    Вячеслав

    Здравствуйте! Подскажите пожалуйста, а как вставить окно из плагина Easy Modal? Вроде все варианты перепробовал, не выходит.

    Владимир

    Здравствуйте.
    Подскажите пожалуйста, как для данного скрипта:

    Сделать исключение…. Если на странице используются не сколько форм и для одной из них не требуется перенаправление.
    Подскажите как это реализовать ?

    михаил

    здравствуйте! Отличная статья! подскажите а как сделать так, чтобы после успешной отправки. сначало открывалось благодарственное попап-окно..а через 5 секунд, включалось перенаправление на главную страницу

    Назар

    Больше не актуально т.к. on_sent_ok убрали из contact form 7

    Denis Creative

    во второй половине статьи есть эта информация

    Дмитрий

    Дмитрий

    Использую следующий скрипт для одной из форм:

    Denis Creative

    Надеюсь, вы уже решили эту проблему.
    Если нет, то ответ в том, что location нужно было поместить внутрь условия if()

    Андрей

    on_sent_ok пишет – устаревший вид ввода, пишите на джава скрипте, что только не пробовал написать не появляется всплывающее окно после отправки

    Denis Creative

    Во второй половине статьи есть эта информация, и в комментариях выше.

    Denis Creative

    Обновил статью, найдёте решение внизу статьи.

    Mihail

    Как сделать, чтобы перенаправление после отправки письма происходило с задержкой?

    Denis Creative

    Бобсон

    А как? подскажите, что прописать в setTimeout и где его ставить?

    Denis Creative

    только поменяйте 34560 на id своей формы.

    Здравствуйте, подскажите что дописать чтобы скачивание файла или страничка открывались в отдельной вкладке

    Denis Creative

    Владимир

    Никак не могу разобраться. Форма работает, но вот сделать закрывающееся окно никак не получается. Вставлял код в functions.php – ругается на ошибки, сайт висит. Ставлю код в main.js – тишина, вообще ничего не происходит.

    Простая строчка в настройках CF7 on_sent_ok: $.fancybox.close(); теперь превратилась в адский геморой. Помогите решить вопрос.

    Denis Creative

    При этом код самого окна должен быть примерно таким (обязательно id="popup_msg" ) – этот код нужно добавить в свой html, footer.php или, если через админку, то в какой-то виджет в футере:

    Владимир

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

    Denis Creative

    Владимир

    Спасибо огромное! Куда я только её не пихал, эту setTimeout. Оказалось, надо ещё в одну функцию завернуть.

    KoolPal

    I am using this within the CF7 form. My form shortcode is [contact-form-7 title="Contact Form Flat"]

    However, this form is not closing after submission. Please guide me.

    Ничего не происходит. Письмо отправляется, но ссылка на скачивание (или автоматическое скачивание) не показывается.
    Подскажите в чем ошибка? Спасибо

    Denis Creative

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

    Да, спасибо, Денис. Исправил (скрипт прописал в футере). Картинку я так просто поместил. Будет ПДФ-файл.

    Денис, добрый день
    Что-то не хочет в другой вкладке открываться.
    Пишу

    Denis Creative

    Да, отлично. Спасибо, Денис.

    Denis Creative

    Денис, опять к Вам. Новая задача возникла. Вместо открытия файла, должно быть сразу скачивание без открытия.
    Прописал

    Ничего не происходит

    Denis Creative

    По моему, файлы pdf не скачиваются, попробуйте использовать предыдущий код, но не pdf, а архив.

    Вообще, странные вещи происходят. Хром начал блокировать всплывающие окна. ПДФ файл перестал даже открываться. При window.open архив тоже не помог. Заменил на location =
    Вроде работает… посмотрим

    Игорь

    Добрый день! Прочитал статью, перепробовал различные варианты и ничего не получается. Вкратце о реализации контактной формы:
    – сайт на wordpress
    -контактная форма CF7, вызывается popup окном, которое создано плагином JetPopup
    -на сайте установлен Google Tag Manager, через который есть возможность прослушивать успешную отправку формы.

    Что не получается? Т.к. я уже упомянул ранее что контактная форма появляется в popup окне при клике на кнопку на сайте, то при успешной ее отправке хотелось бы чтобы popup окно с формой закрывалось и появлялось новое (уже подготовленное в плагине Jet Popup) popup окно с благодарностью.

    Denis Creative

    Принцип тот же, просто вызов попапа может быть другой.

    По необходимости нужно скрыть уведомление об ошибках под формой, чтобы уведомление не отображалось при повторном вызове попапа с формой:

    Или скрыть только уведомление об успешной отправке

    Антон

    Добрый день! Подскажите, пожалуйста, вариант вашего кода, чтобы был редирект в новое окно после отправки формы при условии, что был выбран нужный чек-бокс (если пользователь отметил при вводе формы “хочу забронировать”, после отправки формы его перекидывает на бронирование).

    Отправка формы без перезагрузки страницы:

    AJAX + PHP + JQuery

    • ajax-запрос — функция JavaScript, делающая асинхронную отправку введённых в форму данных к обработчику.
    • PHP-обработчик на сервере, который асинхронно обрабатывает переданные ему Ajax’ом данные. После обработки посылает скрипту ответ с результатом, Вам — заявку.
    • JQuery — библиотека для работы с JavaScript. При создании ajax-формы удобнее пользоваться ей, как и при работе с JS во многих других случаях.

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

    Готовая схема выглядит так:

    Пользователь нажатием кнопки отправляет данные

    файл JS отправляет их в PHP через Ajax, функцию JQuery

    в первом случае владелец сайта также получает готовую заявку.

    Инструкция по созданию формы без перезагрузки

    Прежде всего подключаем JQuery — вставляем строку в конце head сайта (перед тегом ).

    Делаем простую форму (в тегах закрыты комментарии к коду, их желательно удалить):

    Если вывод формы нужен на одной странице, просто вставляем в код . Если вывод нужен по всему сайту или на многих страницах — вышеописанный код вставляется в шаблон.

    Собираем Java-Script. Его, можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки.

    Обработчик, в JS элементе выше мы уже назвали его formx.php:

    Файл formx.php закидываем в корневой каталог сайта (или прописываем соответствующий путь в url: нашего скрипта. JS-код размещается либо в head страницы, либо вместе с html.

    Как видите, всё довольно просто — сделав всё в точности по инструкции, Вы получите простую, но рабочую форму на JQuery без перезагрузки страницы. Если что-то не получилось — задавайте вопросы в комментариях ниже, мы поможем.

    Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так).

    Читайте также: