Сегодня мы собираемся изучить небольшой забавный трюк, где мы перехватываем функциональность HTML-формы, чтобы вместо того, чтобы отправлять данные формы POST в какой-либо другой процесс на стороне сервера, мы могли просто немедленно взять его под контроль с помощью нашего собственного добра javascript. прямо в текущем браузере!

Как звучит?!

Почему мы хотим сделать это в первую очередь? Это просто; потому что в сети так много первоклассных генераторов форм для создания действительно компактных форм, но, возможно, вы не хотите отправлять данные куда-то еще для обработки.

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

<form action="/my-handling-form-page" method="post"> 
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>
  <li class="button">
    <button type="submit">Send your message</button>
  </li>
</form>

Это простая «контактная» форма, в которой вы отправляете администратору веб-сайта обзор их веб-сайта или комментарий к статье. Мы можем добавить к нему немного CSS, и это может выглядеть примерно так:

Как видите, это не так уж и привлекательно, но это можно довольно легко исправить с помощью онлайн-генератора форм с небольшим количеством CSS. Их много, так что я не буду ссылаться на какой-то конкретный. Просто выполните поиск и найдите тот, который вам нравится.

Но у него все еще есть встроенная функциональность формы, как вы можете видеть на этом:

<form action="/my-handling-form-page" method="post">

Он «рожден» просто для того, чтобы взять введенную информацию и отправить ее на другую веб-страницу. Иногда он перенаправляется на ту же страницу, на которой вы находитесь, вызывая загрузку новой страницы, что кажется излишним, поскольку вы уже там. Вот тут-то и пригодится старый добрый javascript!

Давайте изменим эту первую строку на что-то вроде этого:

<form onsubmit="return false">

Мы просто преодолеваем встроенное в форму желание отправить ваши данные на другую веб-страницу, отменив кнопку.

Затем мы скажем кнопке, что делать! Помните эту строчку?

<button type="submit">Send your message</button>

Давайте немного изменим его, чтобы он был:

<button onclick="sendMessage()">Send your message</button>

Теперь мы перенаправили нажатие кнопки, чтобы предоставить javascript в браузере контроль над данными вместо того, чтобы отправлять их куда-то еще. В частности, мы отправляем его в функцию «sendMessage()» в нашем текущем браузере.

Теперь нам просто нужно взять контроль над данными, вот так.

<script>
const sendMessage = () => {
     let name = document.getElementById("name").value;
     let email = document.getElementById("email").value;
     let address = document.getElementById("message").value;
     console.log("name: " + name + " email: " + email + " message: " + message);
     // and just like that you have control of the data
}
</script>

И точно так же вы контролируете все данные, которые были введены в форму. Никаких перенаправлений, никаких перезагрузки страницы, только доступ в реальном времени к уже существующим данным. Кроме того, теперь вы можете использовать модный генератор форм с вашим javascript!

Важное предостережение: некоторые генераторы онлайн-форм не присваивают «идентификатор» каждому элементу, так как нормальная функциональность формы просто требует, чтобы у них было «имя». если вы столкнетесь с этим, вам, возможно, просто придется пойти и дать элементам ввода свои собственные идентификаторы. Легкость в мир.

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

Мне не нужно было создавать еще одну страницу. Вам не нужно переходить на другую страницу, а затем возвращаться к тому, что вы делали. Все выигрывают!