Кнопки
Для отправки введенных данных на форме используются кнопки. Для создания кнопки используется либо элемент 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
var keyBox = document.search.key;
var val = keyBox.value;
if(val.length>5){
alert("Недопустимая длина строки");
e.preventDefault();
}
else
alert("Отправка разрешена");
}
var sendButton = document.search.send;
sendButton.addEventListener("click", sendForm);
</script>
</body>
</html>При нажатии на кнопку происходит событие click, для его обработки к кнопке прикрепляем обработчик sendForm. В этом обработчике проверяем введенный в текстовое поле текст, если его длина больше 5 символов, выводим сообщение о недопустимой длине и прерываем обычный ход события с помощью вызова e.preventDefault(), в итоге форма не отправляется. Если длина текста меньше шести символов, также выводится сообщение, а затем форма отправляется.
Также мы можем при необходимости при отправке изменить адрес, на который отправляются данные:
function sendForm(e){
// получаем значение поля key
var keyBox = document.search.key;
var val = keyBox.value;
if(val.length>5){
alert("Недопустимая длина строки");
document.search.action="PostForm";
}
else
alert("Отправка разрешена");
}В данном случае если длина текста больше пяти символов, текст отправляется по адресу PostForm, поскольку задано свойство action:
document.search.action="PostForm";Для очистки формы предназначены следующие равноценные по функциональности кнопки:
<button type="reset">Очистить</button>
<input type="reset" value="Очистить" />При нажатию на кнопки произойдет очистка форм, также функциональность по очистке полей формы можно реализовать с помощью метода reset():
function sendForm(e){
// получаем значение поля key
var keyBox = document.search.key;
var val = keyBox.value;
if(val.length>5){
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
var keyBox = document.search.key;
var val = keyBox.value;
// получаем элемент printBlock
var printBlock = document.getElementById("printBlock");
// создаем новый параграф
var pElement = document.createElement("p");
// устанавливаем у него текст
pElement.textContent = val;
// добавляем параграф в printBlock
printBlock.appendChild(pElement);
}
var printButton = document.search.print;
printButton.addEventListener("click", printForm);
</script>
</body>
</html>При нажатии на кнопку получаем введенный в текстовое поле текст, создаем новый элемент параграфа для этого текста и добавляем параграф в элемент printBlock.