Как получить то, что пользователь ввел в Contact Form 7, и изменить это перед отправкой?

Question

Как получить то, что пользователь ввел в Contact Form 7, и изменить это перед отправкой? У меня есть поле ввода, когда пользователь отправляет данные, я должен проверить их, и если, что - изменить, я перепробовал много вариантов, но не смог найти то, что мне нужно.

Например, пользователь что-то пишет, мне нужно сравнить это с переменной JS и изменить ее при отправке.

Answer 1

Совершенно неважно что находится в форме, чтобы проверить содержимое полей и/или сделать с ними что угодно перед отправкой. Для этого достаточно перехватить событие submit и при помощи e.preventDefault() остановить его выполнение. После чего написать собственную обработку, но уже в событии formdata, куда собственно и отправляются данные формы после submit.

const myform = document.getElementById('myform');

myform.addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
});
myform.addEventListener('formdata', (e) => {
  const formData = e.formData;
  const query = Object.fromEntries(formData.entries());
  console.log('query formdata()', query);
  // любые проверки на ваш вкус
  // + дописать собственную обработку отправленной формы в ответ на реакцию сервера
  if (query.my_field_1 !== '42') {
    alert('Ошибочка. Вопрос был о вселенной!')
  } else {
    // например просто удалим её не дожидаясь ответа, хотя в реальности здесь должен быть "fetch" или ему подобные.
    alert('Отправлено')
    myform.remove();
  }
});

<form action="post" id="myform">
  <input type="text" name="my_field_1">
  <input type="text" name="my_field_2">
  <button type="submit">Отправить</button>
</form>

БЛОГ НА HUSL

Как получить то, что пользователь ввел в Contact Form 7, и изменить это перед отправкой?

Ответы (1 шт):