JavaScript для форм: получение, проверка и отправка данных без перезагрузки

Расширенные примеры работы с формами

Отправка формы с прогресс-баром загрузки файла

Используется XMLHttpRequest для отслеживания прогресса. Полезна при больших файлах.

<form id="uploadForm">
  <input type="file" name="file" required>
  <progress id="progress" value="0" max="100"></progress>
  <button type="submit">Загрузить</button>
</form>

<script>
  document.getElementById('uploadForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');

    xhr.upload.onprogress = (event) => {
      if (event.lengthComputable) {
        const percent = Math.round((event.loaded / event.total) * 100);
        document.getElementById('progress').value = percent;
      }
    };

    xhr.onload = () => {
      if (xhr.status === 200) {
        alert('Файл загружен');
      } else {
        alert('Ошибка загрузки');
      }
    };
    xhr.send(formData);
  });
</script>

Результат: при выборе файла и нажатии кнопки отображается прогресс-бар. После успешной загрузки приходит уведомление.

Валидация пароля в реальном времени с проверкой сложности

Пользователь видит индикатор сложности пароля сразу при вводе.

<input type="password" id="password">
<div id="strength"></div>

<script>
  document.getElementById('password').addEventListener('input', function() {
    const val = this.value;
    let level = 'слабый';
    if (val.length >= 8 && /[a-z]/.test(val) && /[A-Z]/.test(val) && /\d/.test(val)) {
      level = 'сильный';
    } else if (val.length >= 6) {
      level = 'средний';
    }
    document.getElementById('strength').textContent = 'Сложность: ' + level;
  });
</script>

Результат: при вводе текста ниже появляется сообщение о сложности пароля.

Сериализация данных формы в JSON и отправка

Используется, если сервер ожидает JSON, а не FormData.

<form id="jsonForm">
  <input name="name" placeholder="Имя">
  <input name="age" type="number" placeholder="Возраст">
  <button type="submit">Отправить JSON</button>
</form>

<script>
  document.getElementById('jsonForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());
    // data.age преобразуем в число
    data.age = parseInt(data.age, 10);

    const response = await fetch('/api/user', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    });
    console.log(await response.json());
  });
</script>

Результат: данные формы конвертируются в объект и отправляются как JSON.

Загрузка нескольких файлов с предпросмотром

Позволяет выбрать несколько изображений и показать миниатюры.

<input type="file" id="multiFiles" multiple accept="image/*">
<div id="thumbnails"></div>

<script>
  document.getElementById('multiFiles').addEventListener('change', function() {
    const container = document.getElementById('thumbnails');
    container.innerHTML = '';
    for (const file of this.files) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const img = document.createElement('img');
        img.src = e.target.result;
        img.style.width = '100px';
        img.style.margin = '5px';
        container.appendChild(img);
      };
      reader.readAsDataURL(file);
    }
  });
</script>

Результат: при выборе нескольких изображений под полем появляются их миниатюры.

Автодополнение (debounce) для отправки запроса при вводе

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

<input type="text" id="search" placeholder="Поиск...">
<ul id="suggestions"></ul>

<script>
  function debounce(fn, delay) {
    let timeout;
    return function(...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => fn.apply(this, args), delay);
    };
  }

  document.getElementById('search').addEventListener('input', debounce(async function() {
    const query = this.value.trim();
    if (!query) {
      document.getElementById('suggestions').innerHTML = '';
      return;
    }
    const response = await fetch(`/suggest?q=${encodeURIComponent(query)}`);
    const data = await response.json();
    // data - массив подсказок
    document.getElementById('suggestions').innerHTML = data.map(item => `<li>${item}</li>`).join('');
  }, 300));
</script>

Результат: через 300 мс после остановки ввода отправляется запрос на сервер, под полем появляются подсказки.