KoljaL/AllrasioButtons.html

## AllrasioButtons.html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>JavaScript TestScript 0.1</title>
	<style>
		form {
			margin: auto;
			width: 25em;
		}

		p {
			margin: auto;
			width: 35em;
			hyphens: auto;
			text-align: justify;
		}

		fieldset:disabled {
			background: whitesmoke;
		}

		input {
			margin: 0 0 1em 1em;
			text-align: right;
			padding: 0.3em;
		}

		input:disabled {
			background: gainsboro;
		}

		input:disabled[value] {
			color: whitesmoke;
		}

		label {
			display: inline-block;
			text-align: right;
			width: 12em;
		}

		button {
			margin-left: 13em;
		}
	</style>
</head>

<body style="text-align:center;">
	<main>
		<!-- <h1>Check all Radios</h1>
        <p>Es sind 5 unabhaengige Formulare auf der Seite: <br> - drei mit Radio Button <br> - eins mit Text <br> - eins mit dem Absendebutton<br>
            Der Button ist mittels CSS <i>disabled</i> und wird erst freigegeben, wenn jedes Formular, das ein Radioelement besitzt valide ist. Alle anderen Formulare werden noch nicht behandelt, koennen aber leicht hinzugefuegt werden.<br><br>
            Alles was in JS geschrieben ist, habe ich versucht nachvollziehbar zu kommentieren. Und es gibt zu jedem Schritt eine Ausgabe in der Console. <br><br><br></p> -->
		<form>
			<fieldset id="form1">
				<legend>Form 1</legend>
				<input type="radio" name="radio1" id="1a" value="ok" autocomplete="off" />
				<label for="1a">1_A</label>
				<br>
				<input type="radio" name="radio1" id="1b" value="ok" autocomplete="off" />
				<label for="1b">1_B</label>
			</fieldset>
		</form>

		<form>
			<fieldset id="form2">
				<legend>Form 2</legend>
				<input type="radio" name="radio2" id="2a" value="ok" autocomplete="off" />
				<label for="2a">2_A</label>
				<br>
				<input type="radio" name="radio2" id="2b" value="ok" autocomplete="off" />
				<label for="2b">2_B</label>
			</fieldset>
		</form>

		<form>
			<fieldset id="form3">
				<legend>Form 3</legend>
				<input type="text" name="text" id="text" placeholder="nur zum testen..." autocomplete="off" />
            </fieldset>
		</form>

		<form>
			<fieldset id="form4">
				<legend>Form 4</legend>
				<input type="radio" name="radio4" id="4a" value="ok" autocomplete="off" />
				<label for="4a">4_A</label>
				<br>
				<input type="radio" name="radio4" id="4b" value="ok" autocomplete="off" />
				<label for="4b">4_B</label>
			</fieldset>
		</form>

		<form>
			<fieldset id="absenden" disabled>
				<button type="button">absenden</button>
			</fieldset>
		</form>
	</main>

	<script type="text/javascript">
		'use strict';
        document.addEventListener('DOMContentLoaded', function() {
            let allForms = document.querySelectorAll("form");
            allForms.forEach(function(thisForm) {
                thisForm.addEventListener("change", function() {
                    // Formular ist zu Beginn valide
                    var FormValid = 1;
                    // for-Schleife ueber alle Forms (muss for wg. break)
                    for (let Form of allForms) {
                        console.log(Form[0].id);
                        // CHECK RADIO START
                        let allRadio = Form.querySelectorAll("input[type=radio]");
                        let RadioSum = 0;
                        allRadio.forEach(function(allRadio) {
                            console.log("Radio checked " + allRadio.id + " " + allRadio.checked);
                            RadioSum += allRadio.checked;
                        });
                        console.log("RadioSum " + RadioSum);

                        if (allRadio.length > 0 && RadioSum == 0) {
                            FormValid = 0;
                            break;
                        }
                        // CHECK RADIO END
                    }
                    console.log("FormValid " + FormValid);
                    if (FormValid == 1) document.getElementById('absenden').removeAttribute('disabled');
                }, 0); //thisForm.addEventListener("change"
            }); //allForms.forEach
        }); //addEventListener('DOMContentLoaded'
	</script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>JavaScript TestScript 0.1</title>
	<style>
	form {
	margin: auto;
	width: 25em;
	}

	p {
	margin: auto;
	width: 35em;
	hyphens: auto;
	text-align: justify;
	}

	fieldset:disabled {
	background: whitesmoke;
	}

	input {
	margin: 0 0 1em 1em;
	text-align: right;
	padding: 0.3em;
	}

	input:disabled {
	background: gainsboro;
	}

	input:disabled[value] {
	color: whitesmoke;
	}

	label {
	display: inline-block;
	text-align: right;
	width: 12em;
	}

	button {
	margin-left: 13em;
	}
	</style>
	</head>

	<body style="text-align:center;">
	<main>
	<!-- <h1>Check all Radios</h1>
	<p>Es sind 5 unabhaengige Formulare auf der Seite: <br> - drei mit Radio Button <br> - eins mit Text <br> - eins mit dem Absendebutton<br>
	Der Button ist mittels CSS <i>disabled</i> und wird erst freigegeben, wenn jedes Formular, das ein Radioelement besitzt valide ist. Alle anderen Formulare werden noch nicht behandelt, koennen aber leicht hinzugefuegt werden.<br><br>
	Alles was in JS geschrieben ist, habe ich versucht nachvollziehbar zu kommentieren. Und es gibt zu jedem Schritt eine Ausgabe in der Console. <br><br><br></p> -->
	<form>
	<fieldset id="form1">
	<legend>Form 1</legend>
	<input type="radio" name="radio1" id="1a" value="ok" autocomplete="off" />
	<label for="1a">1_A</label>
	<br>
	<input type="radio" name="radio1" id="1b" value="ok" autocomplete="off" />
	<label for="1b">1_B</label>
	</fieldset>
	</form>

	<form>
	<fieldset id="form2">
	<legend>Form 2</legend>
	<input type="radio" name="radio2" id="2a" value="ok" autocomplete="off" />
	<label for="2a">2_A</label>
	<br>
	<input type="radio" name="radio2" id="2b" value="ok" autocomplete="off" />
	<label for="2b">2_B</label>
	</fieldset>
	</form>

	<form>
	<fieldset id="form3">
	<legend>Form 3</legend>
	<input type="text" name="text" id="text" placeholder="nur zum testen..." autocomplete="off" />
	</fieldset>
	</form>

	<form>
	<fieldset id="form4">
	<legend>Form 4</legend>
	<input type="radio" name="radio4" id="4a" value="ok" autocomplete="off" />
	<label for="4a">4_A</label>
	<br>
	<input type="radio" name="radio4" id="4b" value="ok" autocomplete="off" />
	<label for="4b">4_B</label>
	</fieldset>
	</form>

	<form>
	<fieldset id="absenden" disabled>
	<button type="button">absenden</button>
	</fieldset>
	</form>
	</main>

	<script type="text/javascript">
	'use strict';
	document.addEventListener('DOMContentLoaded', function() {
	let allForms = document.querySelectorAll("form");
	allForms.forEach(function(thisForm) {
	thisForm.addEventListener("change", function() {
	// Formular ist zu Beginn valide
	var FormValid = 1;
	// for-Schleife ueber alle Forms (muss for wg. break)
	for (let Form of allForms) {
	console.log(Form[0].id);
	// CHECK RADIO START
	let allRadio = Form.querySelectorAll("input[type=radio]");
	let RadioSum = 0;
	allRadio.forEach(function(allRadio) {
	console.log("Radio checked " + allRadio.id + " " + allRadio.checked);
	RadioSum += allRadio.checked;
	});
	console.log("RadioSum " + RadioSum);

	if (allRadio.length > 0 && RadioSum == 0) {
	FormValid = 0;
	break;
	}
	// CHECK RADIO END
	}
	console.log("FormValid " + FormValid);
	if (FormValid == 1) document.getElementById('absenden').removeAttribute('disabled');
	}, 0); //thisForm.addEventListener("change"
	}); //allForms.forEach
	}); //addEventListener('DOMContentLoaded'
	</script>
	</body>

	</html>