Кнопки

Последнее обновление: 1.11.2015

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

Если же длина текста меньше шести символов, то также выводится сообщение, и затем форма отправляется.

Отправка формы через JavaScript

Также мы можем при необходимости при отправке изменить адрес, на который отправляются данные:

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.

Обработка нажатия кнопки в JavaScript
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850