Для отправки введенных данных на форме используются кнопки. Для создания кнопки используется либо элемент button
:
<button name="send">Отправить</button>
Либо элемент input
:
<input type="submit" name="send" value="Отправить" />
С точки зрения функциональности в html эти элементы не совсем равноценны, но в данном случае они нас интересуют с точки зрения взаимодействия с кодом javascript.
При нажатии на любой из этих двух вариантов кнопки происходит отправка формы по адресу, который указан у формы в атрибуте action
, либо по адресу веб-страницы, если атрибут action не указан.
Однако в коде javascript мы можем перехватить отправку, обрабатывая событие click
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <form name="search"> <input type="text" name="key"></input> <input type="submit" name="send" value="Отправить" /> </form> <script> function sendForm(e){ // получаем значение поля key const keyBox = document.search.key; const val = keyBox.value; if(val.length<3){ alert("Недопустимая длина строки"); e.preventDefault(); } else alert("Отправка разрешена"); } const sendButton = document.search.send; sendButton.addEventListener("click", sendForm); </script> </body> </html>
При нажатии на кнопку происходит событие click
, и для его обработки к кнопке прикрепляем обработчик sendForm
. В этом
обработчике проверяем введенный в текстовое поле текст. Если его длина меньше 3 символов, то выводим сообщение о недостимой длине и прерываем обычный
ход события с помощью вызова e.preventDefault(). В итоге форма не отправляется.
Если же длина текста три и больше символов, то также выводится сообщение, и затем форма отправляется.
Также мы можем при необходимости при отправке изменить адрес, на который отправляются данные:
function sendForm(e){ // получаем значение поля key const keyBox = document.search.key; const val = keyBox.value; if(val.length > 3){ alert("Недопустимая длина строки"); document.search.action="PostForm"; } else alert("Отправка разрешена"); }
В данном случае, если длина текста меньше 3 символов, то текст отправляется, только теперь он отправляется по адресу PostForm
,
поскольку задано свойство action:
document.search.action="PostForm";
Для очистки формы предназначены следующие равноценные по функциональности кнопки:
<button type="reset">Очистить</button> <input type="reset" value="Очистить" />
При нажатию на кнопки произойдет очистка форм. Но также функциональность по очистке полей формы можно реализовать с помощью метода
reset()
:
function sendForm(e){ // получаем значение поля key const keyBox = document.search.key; const val = keyBox.value; if(val.length < 3){ alert("Недопустимая длина строки"); document.search.reset(); e.preventDefault(); } else alert("Отправка разрешена"); }
Кроме специальных кнопок отправки и очистки на форме также может использоваться обычная кнопка:
<input type="button" name="send" value="Отправить" />
При нажатии на подобную кнопку отправки данных не происходит, хотя также генерируется событие click:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <form name="search"> <input type="text" name="key" placeholder="Введите ключ"></input> <input type="button" name="print" value="Печать" /> </form> <div id="printBlock"></div> <script> function printForm(e){ // получаем значение поля key const keyBox = document.search.key; const val = keyBox.value; // получаем элемент printBlock const printBlock = document.getElementById("printBlock"); // создаем новый параграф const pElement = document.createElement("p"); // устанавливаем у него текст pElement.textContent = val; // добавляем параграф в printBlock printBlock.appendChild(pElement); } const printButton = document.search.print; printButton.addEventListener("click", printForm); </script> </body> </html>
При нажатии на кнопку получаем введенный в текстовое поле текст, создаем новый элемент параграфа для этого текста и добавляем параграф в элемент printBlock.