Кнопки

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

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

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

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

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

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.

Обработка нажатия кнопки в JavaScript

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм