Сегодня мы собираемся изучить небольшой забавный трюк, где мы перехватываем функциональность 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 вместо перенаправления формы. Вот почему в форме написано «приятно видеть тебя, папочка», а не целая новая страница.
Мне не нужно было создавать еще одну страницу. Вам не нужно переходить на другую страницу, а затем возвращаться к тому, что вы делали. Все выигрывают!