JS Кнопки

Кнопки

Для отправки введенных данных на форме используются кнопки. Для создания кнопки используется либо элемент 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. Output