Перенаправление на страницу после отправки формы виджета

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Создание формы виджета
Шаг 2: Отправка данных через AJAX
Шаг 3: Обработка данных на сервере
Заключение

Вопрос или проблема

У меня есть виджет с пользовательскими полями, такими как возраст, почтовый индекс и т.д. Данные, отправленные через форму, будут переданы через API третьей стороны, который выдаст мне JSON. Теперь я хочу перенаправить на страницу, показывающую результаты. Как мне перенаправить на страницу из виджета с результатом?

Если вы делаете это через Ajax, то после получения ответа вы можете перенаправить с помощью JavaScript

window.location.href="https://wordpress.stackexchange.com/questions/198693/url to be redirected to";

Внутри виджета убедитесь, что у кнопки отправки уникальное name:

<button type="submit" name="widget_submit">Отправить</button>

В functions.php:

function wpse20150815_processing_widget() {
   if( !isset( $_POST['widget_submit'] ) )
       return;

   //установите массив для хранения ошибок
   $errors = array();

   //обработать данные формы и сохранить ошибки в массиве $errors
   if( empty( $_POST['pincode'] ) ) {
      $errors[] = __( 'Почтовый индекс не может быть пустым', 'textdomain' );
   }

   //если есть ошибка в нашей валидации данных, не продолжайте дальнейшие действия
   if( !empty($errors) )
      return;

   //делайте то, что хотите с обработанными данными
   //не забудьте очистить поля формы перед сохранением данных в базу данных

   //т.е. вставка содержимого поста с использованием данных формы
   $post_id = wp_insert_post(...); //демонстрация, используйте правильную очистку и т.д.

   if( !is_wp_error( $post_id ) ) {
      //если пост успешно вставлен, то перенаправьте
      wp_redirect('path/you/desire/');
      exit;
   }
}
add_action( 'template_redirect', 'wpse20150815_processing_widget' );

Если вы хотите поблагодарить кого-то за этот код, скажите спасибо @Sisir за его ответ, откуда я узнал это.

Ответ или решение

Чтобы реализовать перенаправление на страницу после отправки формы виджета с пользовательскими полями (например, возраст, почтовый индекс и т.д.), необходимо учитывать несколько важных шагов. В этом ответе мы рассмотрим, как выполнить данное перенаправление на основе отправки формы через AJAX и обработкой на стороне сервера с использованием WordPress.

Шаг 1: Создание формы виджета

Первое, что вам нужно сделать — правильно настроить HTML-форму вашего виджета. Важно, чтобы кнопка отправки формы имела уникальное имя, чтобы вы могли идентифицировать ее позже.

Пример HTML-кода формы:

<form id="my-widget-form" method="post">
    <input type="text" name="age" placeholder="Возраст" required>
    <input type="text" name="pincode" placeholder="Почтовый индекс" required>
    <button type="submit" name="widget_submit">Отправить</button>
</form>

Шаг 2: Отправка данных через AJAX

Для отправки формы без перезагрузки страницы вы можете использовать AJAX. Ниже представлен пример кода, который выполняет AJAX-запрос при отправке формы.

document.getElementById("my-widget-form").onsubmit = function(event) {
    event.preventDefault(); // предотвращаем стандартное поведение формы

    var formData = new FormData(this);

    fetch('ваш_url', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        // Обработка результата, например, перенаправление:
        if (data.success) {
            window.location.href = "https://ваш_сайт/страница_результатов"; // Перенаправление на страницу с результатами
        } else {
            // Обработка ошибки
            alert(data.message);
        }
    })
    .catch(error => console.error('Ошибка:', error));
};

Шаг 3: Обработка данных на сервере

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

Пример обработки данных в functions.php:

function wpse20150815_processing_widget() {
    if (!isset($_POST['widget_submit'])) {
        return;
    }

    $errors = array();

    // Валидация входящих данных
    if (empty($_POST['pincode'])) {
        $errors[] = __('Почтовый индекс не может быть пустым', 'textdomain');
    }

    // Если есть ошибки, возвращаем их
    if (!empty($errors)) {
        wp_send_json_error(array('message' => implode(', ', $errors)));
        wp_die();
    }

    // Обработка данных
    $post_id = wp_insert_post(...); // Вставьте код для обработки данных

    if (!is_wp_error($post_id)) {
        // Успешное добавление записи
        wp_send_json_success(array('message' => 'Данные успешно отправлены.'));
    } else {
        wp_send_json_error(array('message' => 'Ошибка: ' . $post_id->get_error_message()));
    }

    wp_die();
}

add_action('wp_ajax_my_widget_action', 'wpse20150815_processing_widget');
add_action('wp_ajax_nopriv_my_widget_action', 'wpse20150815_processing_widget');

Заключение

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

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