Как реализовать автоматические расчёты по нескольким формам в WordPress

Автор: Юлия Журавлева | Опубликовано: 16.04.2026

Зачем нужны автоматические расчёты между несколькими формами на сайте WordPress

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

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

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

Основные подходы к реализации межформенных рассчётов

Использование JavaScript для синхронизации значений форм

Самый простой способ — слушать события input на одной форме и обновлять другую форму в реальном времени через JavaScript. Это подходит, если логика расчёта проста и может быть выполнена на стороне клиента.

Например, допустим, у нас есть две формы: formA и formB. При изменении значения в formA нужно пересчитать и обновить formB:

document.getElementById('formA').addEventListener('input', function() {
  const val = +this.querySelector('input[name="param"]').value;
  const result = val * 2; // простая формула
  document.getElementById('formB').querySelector('input[name="result"]').value = result;
});

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

Использование AJAX для серверных расчётов и обновления форм

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

Пример AJAX-запроса в WordPress с использованием встроенного admin-ajax.php:

jQuery('#formA input').on('input', function() {
  var param = jQuery('#formA input[name="param"]').val();
  jQuery.ajax({
    url: ajaxurl, // у WordPress есть глобальная переменная
    method: 'POST',
    data: {
      action: 'wpcalc_calculate',
      param: param
    },
    success: function(response) {
      jQuery('#formB input[name="result"]').val(response.data);
    }
  });
});

На стороне PHP нужно создать обработчик, например в functions.php или плагине:

add_action('wp_ajax_wpcalc_calculate', 'wpcalc_handle_calculate');
add_action('wp_ajax_nopriv_wpcalc_calculate', 'wpcalc_handle_calculate');

function wpcalc_handle_calculate() {
  $param = isset($_POST['param']) ? floatval($_POST['param']) : 0;
  $result = $param * 2; // пример расчёта
  wp_send_json_success($result);
}

Пример реализации: автоматический расчёт стоимости из двух форм с зависимостями

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

HTML для форм:

<form id="formA">
  <label>Количество товара:</label>
  <input type="number" name="quantity" value="1" min="1" />
</form>

<form id="formB">
  <label>Доп. услуги (шт):</label>
  <input type="number" name="services" value="0" min="0" />
  <label>Итоговая стоимость:</label>
  <input type="text" name="total" readonly />
</form>

JavaScript код с AJAX для обновления стоимости:

jQuery(document).ready(function($) {
  function wpcalc_updateTotal() {
    var quantity = $('#formA input[name="quantity"]').val();
    var services = $('#formB input[name="services"]').val();
    $.ajax({
      url: ajaxurl,
      type: 'POST',
      data: {
        action: 'wpcalc_calculate_total',
        quantity: quantity,
        services: services
      },
      success: function(response) {
        if(response.success) {
          $('#formB input[name="total"]').val(response.data);
        }
      }
    });
  }
  $('#formA input, #formB input').on('input', wpcalc_updateTotal);
  wpcalc_updateTotal(); // начальный вызов
});

PHP обработчик:

add_action('wp_ajax_wpcalc_calculate_total', 'wpcalc_calculate_total_callback');
add_action('wp_ajax_nopriv_wpcalc_calculate_total', 'wpcalc_calculate_total_callback');

function wpcalc_calculate_total_callback() {
  $quantity = isset($_POST['quantity']) ? intval($_POST['quantity']) : 0;
  $services = isset($_POST['services']) ? intval($_POST['services']) : 0;

  $price_per_item = 100; // базовая цена
  $price_per_service = 20; // цена доп. услуги

  $total = $quantity * $price_per_item + $services * $price_per_service;

  wp_send_json_success(number_format($total, 2));
}

Лучшие практики и советы по оптимизации межформенных расчетов

Минимизируйте количество AJAX-запросов

Частые запросы могут нагрузить сервер и замедлить сайт. Используйте debounce или throttle для событий input, чтобы отправлять запросы не при каждом нажатии, а с задержкой.

let timer;
$('#formA input, #formB input').on('input', function() {
  clearTimeout(timer);
  timer = setTimeout(wpcalc_updateTotal, 300);
});

Кэшируйте результаты расчётов при возможности

Если расчёты тяжёлые, используйте Transients API для кэширования результатов на сервере, чтобы избежать повторных вычислений при одинаковых данных.

Валидация и защита данных

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

Итог

Автоматизация расчётов по нескольким формам в WordPress — полезный инструмент для создания интерактивных и удобных сайтов. Используя комбинацию JavaScript, AJAX и PHP, можно реализовать гибкие решения с синхронизацией данных в реальном времени. При необходимости подключайте специальные плагины для упрощения разработки и расширения функционала.