Скрипт автозаполнения формы вызывает бесконечную перезагрузку страницы

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

Почему возникает бесконечная перезагрузка?

Основная причина - неправильная обработка события отправки формы или клика по кнопке. В представленном коде скрипт вызывает document.querySelector('.btn').click() без проверки, является ли это действие уже результатом пользовательского события. Если внутри функции bot() происходит повторный вызов click(), а на кнопку или форму повешен обработчик, который снова запускает bot(), образуется бесконечный цикл. Также часто проблема кроется в использовании location.reload() или в отправке формы, которая по умолчанию перезагружает страницу.

Типичные ошибки в коде автозаполнения

• Повторный клик без флага выполнения: после первого клика флаг check устанавливается в false, но если скрипт вызывается повторно (например, при загрузке страницы), условие может снова стать истинным из-за неправильной области видимости переменной.
• Отсутствие предотвращения стандартного поведения формы: при отправке формы через JavaScript нужно использовать event.preventDefault(), иначе браузер выполнит стандартную отправку с перезагрузкой.
• Неправильный селектор кнопки: document.querySelector('.btn') может найти не ту кнопку или вообще не найти элемент, что приведёт к ошибке и перезагрузке.

Как исправить скрипт, чтобы избежать перезагрузки

Чтобы устранить бесконечную перезагрузку, необходимо переписать логику скрипта. Во-первых, убедитесь, что скрипт запускается только один раз, например, с помощью флага, хранящегося в localStorage или в глобальной переменной. Во-вторых, при отправке формы используйте fetch или XMLHttpRequest, чтобы избежать перезагрузки страницы.

function bot() {
  if (localStorage.getItem('formSent')) return;
  let inputs = document.querySelectorAll('.form-control');
  inputs.forEach(input => {
    if (input.name === 'userName') input.value = 'Дмитрий';
    if (input.name === 'userTel') input.value = '+7 (920) 002-49-01';
    if (input.name === 'userEmail') input.value = 'illidan.1990@mail.ru';
  });
  document.querySelector('.rf-button-send').click();
  localStorage.setItem('formSent', 'true');
}
setTimeout(bot, 1000); // задержка для загрузки страницы

Альтернативные решения для ежедневной проверки

Вместо запуска скрипта на стороне клиента рассмотрите серверные решения: cron-задачи или планировщики, которые отправляют POST-запросы к вашему API. Это надёжнее и не влияет на пользовательский интерфейс. Если же требуется клиентский скрипт, используйте fetch для отправки данных без перезагрузки:

fetch('/submit-form', {
  method: 'POST',
  body: new FormData(document.querySelector('.rf-form'))
}).then(response => console.log('Форма отправлена'));

Заключение

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