Согласие на обработку персональных данных в любой форме JQuery

Простейшие примеры, как сделать в любой форме подтверждение Я согласен на обработку персональных данных с помощью jQuery.

Пример №1

Вариант, когда вы сможете отредактировать форму, добавить в нее поле с флажком

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>jQuery privacy form</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
	$(function () {
		var use_privacy = true;
		$('#form1').on('submit', function (e) {

			if (use_privacy) {
				if (!$(this).find('input[name=privacy]').prop('checked')) {
					alert('Для продолжения вы должны принять условия Пользовательского соглашения');
					return false;
				}
			}

			//Тут код отправки формы
			document.write('Форма успешно отправлена!');

			e.preventDefault();
		});
	});
</script>
<form id="form1" name="form1" action="" method="post">
	<fieldset>
		<legend>Форма обратной связи</legend>
		<p>
			Ваше имя<br>
			<input type="text" name="name">
		</p>
		<p>
			Ваш e-mail<br>
			<input type="text" name="email">
		</p>
		<p>
			<input type="checkbox" name="privacy">
			<a href="/privacy.html" target="_blank">Я согласен на обработку персональных данных</a>
		</p>
		<p>
			<button type="submit" name="submit">Отправить</button>
		</p>
	</fieldset>
</form>

</body>
</html>

Пример №2

Вариант, когда у вас нет возможности изменить саму форму в php-коде, но есть возможность это сделать с помощью jQuery.
Просто при загрузке страницы флажок с соглашением добавляется в нужное место с помощью кода в JS, а на форму вешается обработчик или изменяется уже существующий обработчик в вашем случае.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>jQuery privacy form</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
	$(function () {

		var html_privacy = '';
		html_privacy += '<p>';
		html_privacy += '<input type="checkbox" name="privacy">';
		html_privacy += '<a href="/privacy.html" target="_blank">Я согласен на обработку персональных данных</a>';
		html_privacy += '</p>';
		$('#form2 fieldset p:last').before(html_privacy);
		//$('#form2 fieldset').append(html_privacy);

		var use_privacy = true;
		$('#form2').on('submit', function (e) {

			if (use_privacy) {
				if (!$(this).find('input[name=privacy]').prop('checked')) {
					alert('Для продолжения вы должны принять условия Пользовательского соглашения');
					return false;
				}
			}

			//Тут код отправки формы
			document.write('Форма успешно отправлена!');

			e.preventDefault();
		});
	});
</script>
<form id="form2" name="form2" action="" method="post">
	<fieldset>
		<legend>Форма обратной связи</legend>
		<p>
			Ваше имя<br>
			<input type="text" name="name">
		</p>
		<p>
			Ваш e-mail<br>
			<input type="text" name="email">
		</p>
		<p>
			<button type="submit" name="submit">Отправить</button>
		</p>
	</fieldset>
</form>
</body>
</html>

← Вернуться в список

Меню