bazooka07/check-my-radio-buttons.php

## check-my-radio-buttons.php
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Clique-moi partout</title>
	<meta charset="utf-8" />
  <meta name="description" content="https://forum.alsacreations.com/topic-20-83298-1.html" />
	<style>
		body { background-color: #444; }
		#congrats, form { width: 20rem; margin: 50vh auto 0; padding: 0.3rem 1rem; transform: translateY(-50%); background-color: #e8e8e8; text-align: center; border-radius: 1.5rem; }
		p.warning { display: none; color: red; background-color: yellow; }
		div.active p.warning { display: block; }
	</style>
</head>
<body>
<?php
	if(filter_has_var(INPUT_POST, 'radio-1')) {
?>
	<div id="congrats">Tu es un être merveilleux<br /><?php echo str_repeat('&#10084; ', 10); ?></div>
<?php
	exit;
} else {
?>
	<form id="form1" method="post">
		<p><strong>Tu cliques bien partout !</strong></p>
<?php
	$entries = explode(' ', '1 2 3 4');
	foreach($entries as $k) { ?>
		<div id="choix-<?php echo $k; ?>">
			<p>Choix <?php echo $k; ?> :
<?php
		foreach(explode(' ', 'a b c') as $value) {
			$id = "id-radio-$k-$value";
			echo <<< RADIO
			<input id="$id" type="radio" name="radio-$k" value="$value" /><label for="$id">$value</label>\n
RADIO;
		}
?>
			</p>
			<p class="warning">Il faut une valeur pour le choix <?php echo $k; ?></p>
		</div>
<?php
	}
}
?>
		<div>
			<label for="blaze">Ton blaze, visiteur</label>
			<input id="blaze" name="blaze" value="" required />
		</div>
		<div>
			<input type="reset" />
			<input type="submit" />
		</div>
	</form>
	<script type="text/javascript">
	(function() {
		'use strict';

		// checks the user
		document.getElementById('form1').addEventListener('submit', function(event) {
			const form1 = this;
			if(
				['<?php echo implode("','", $entries); ?>'].reduce(
					function(previousValue, name) {
						const inputName = 'radio-' + name;
						if(form1.elements[inputName].value == '' ) {
							console.log(inputName + ' pas coché');
							const warning = document.getElementById('choix-' + name);
							if(warning != null) { warning.classList.add('active'); }
							return previousValue + 1;
						} else {
							return previousValue;
						}
					},
					0
				) > 0
			) {
				event.preventDefault();
				// alert("T'as pas coché " + result + " cases !!!");
			}
		});

		// warnings
		const radioBtns = document.querySelectorAll('#form1 input[type="radio"]');
		if(radioBtns != null) {
			for(var i=0, iMax=radioBtns.length; i<iMax; i++) {
				radioBtns[i].addEventListener('change', function(event) {
					if(this.checked) {
						const container = document.getElementById(this.name.replace(/^radio-/, 'choix-'));
						if(container != null) { container.classList.remove('active'); }
					}
				});
			}
		}
	})();
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Clique-moi partout</title>
	<meta charset="utf-8" />
	<meta name="description" content="https://forum.alsacreations.com/topic-20-83298-1.html" />
	<style>
	body { background-color: #444; }
	#congrats, form { width: 20rem; margin: 50vh auto 0; padding: 0.3rem 1rem; transform: translateY(-50%); background-color: #e8e8e8; text-align: center; border-radius: 1.5rem; }
	p.warning { display: none; color: red; background-color: yellow; }
	div.active p.warning { display: block; }
	</style>
	</head>
	<body>
	<?php
	if(filter_has_var(INPUT_POST, 'radio-1')) {
	?>
	<div id="congrats">Tu es un être merveilleux<br /><?php echo str_repeat('❤ ', 10); ?></div>
	<?php
	exit;
	} else {
	?>
	<form id="form1" method="post">
	<p><strong>Tu cliques bien partout !</strong></p>
	<?php
	$entries = explode(' ', '1 2 3 4');
	foreach($entries as $k) { ?>
	<div id="choix-<?php echo $k; ?>">
	<p>Choix <?php echo $k; ?> :
	<?php
	foreach(explode(' ', 'a b c') as $value) {
	$id = "id-radio-$k-$value";
	echo <<< RADIO
	<input id="$id" type="radio" name="radio-$k" value="$value" /><label for="$id">$value</label>\n
	RADIO;
	}
	?>
	</p>
	<p class="warning">Il faut une valeur pour le choix <?php echo $k; ?></p>
	</div>
	<?php
	}
	}
	?>
	<div>
	<label for="blaze">Ton blaze, visiteur</label>
	<input id="blaze" name="blaze" value="" required />
	</div>
	<div>
	<input type="reset" />
	<input type="submit" />
	</div>
	</form>
	<script type="text/javascript">
	(function() {
	'use strict';

	// checks the user
	document.getElementById('form1').addEventListener('submit', function(event) {
	const form1 = this;
	if(
	['<?php echo implode("','", $entries); ?>'].reduce(
	function(previousValue, name) {
	const inputName = 'radio-' + name;
	if(form1.elements[inputName].value == '' ) {
	console.log(inputName + ' pas coché');
	const warning = document.getElementById('choix-' + name);
	if(warning != null) { warning.classList.add('active'); }
	return previousValue + 1;
	} else {
	return previousValue;
	}
	},
	0
	) > 0
	) {
	event.preventDefault();
	// alert("T'as pas coché " + result + " cases !!!");
	}
	});

	// warnings
	const radioBtns = document.querySelectorAll('#form1 input[type="radio"]');
	if(radioBtns != null) {
	for(var i=0, iMax=radioBtns.length; i<iMax; i++) {
	radioBtns[i].addEventListener('change', function(event) {
	if(this.checked) {
	const container = document.getElementById(this.name.replace(/^radio-/, 'choix-'));
	if(container != null) { container.classList.remove('active'); }
	}
	});
	}
	}
	})();
	</script>
	</body>
	</html>