Input type radio - bei klick auswahl begrenzen

Hi.

Ich suche nach folgender Lösung/Möglichkeit:

Ich habe in meiner html datei, 1x 4 und 1x 3 input felder mit dem type radio. Nun möchte ich die auswahl in den 3 input felder begrenzen, nachdem der anweder in den ersten 4 feldern eine eingabe gemacht hat.

input 1: IT
input 2: Produktion
input 3: Vertrieb
input 4: Verwaltung

input 1: Ort 1
input 2: Ort 2
input 3: Ort 3

Da es it nur in ort 1 gibt, soll der anweder nicht ort 2 und ort 3 angezeigt bekommen

wie kann man das machen? danke für eure hilfe

Please also mark the comments that contributed to the solution of the article

Content-Key: 113446

Url: https://administrator.de/contentid/113446

Printed on: April 25, 2024 at 13:04 o'clock

4 Comments

Latest comment

da es die it nur in ort 1 gibt, soll der anweder nicht ort 2 und ort 3 angezeigt bekommen

Entweder du nimmst Ajax und lässt bei einem onChange-Event die zur Verfügung stehenden Möglichkeiten neu laden oder eine menge Javascript-Logik.

außerdem interessiert es mich, wie ich vorgeben kann, dass der anweder dieses feld unbedingt ausfüllen muss!

Sowas kann man zwar auch per Javascript machen, aber wirklich sicher ist nur eine serverseitige Überprüfung z.B. mit PHP

Grüße

Max

EDIT: Die Über-den-Daumen-Lösung mit JS:

<html>
	<body>
		<script type="text/javascript">  
		
			function reloadLocations() {
				var allowedLoc = new Array(new Array(),      //0
				                           new Array('1'),     // IT an Ort 1  
				                           new Array('1','2','3'), //Produktion an Ort 1,2,3  
				                           new Array('1','3'),   // Vertrieb an Ort 1,3  
				                           new Array('2'));  // Verwaltung an Ort 2  
				var locations = new Array('','Ort 1','Ort 2','Ort 3');  
				
				var locSelect = getEl('loc');  
				var selectedOu = parseInt(document.frm1.ou.value);
				var availLoc = allowedLoc[selectedOu];
				
				removeAllChilds(locSelect);
				
				for (var i=0; i < availLoc.length; i++) {
					var locItem = document.createElement("option");  
					locItem.setAttribute("value",i);  
					locItem.appendChild(document.createTextNode(locations[availLoc[i]]));
					locSelect.appendChild(locItem);
				};
				
			}
			
			function removeAllChilds (el) {
				if(el.hasChildNodes()) {
					while( el.childNodes.length >= 1) {
						el.removeChild(el.firstChild);
					}
				}
			}
			
			function getEl(e) {
				return document.getElementById(e);
			}
			
		</script>
		<form name="frm1">  
			Abteilung:
			<select name="ou" onchange="reloadLocations();">  
				<option value="0"></option>  
				<option value="1">IT</option>  
				<option value="2">Produktion</option>  
				<option value="3">Vertrieb</option>  
				<option value="4">Verwaltung</option>  
			</select>
			<br />
			Ort:
			<select name="loc" id="loc">  
			</select>
		</form>
	</body>
</html>

EDIT: Das ganze noch mit AJAX über den Daumen (nicht getestet, nicht praxistauglich):
Die HTML-Seite

<html>
	<body>
		<script type="text/javascript">  
		
			function createXMLHttpRequest() {
				var req = null;
				try {
					req = new ActiveXObject("MSXML2.XMLHTTP");  
				}
				catch (err_MSXML2) {
					try {
						req = new ActiveXObject("Microsoft.XMLHTTP");  
					}
					catch (err_Microsoft) {
						if (typeof XMLHttpRequest != "undefined")   
						req = new XMLHttpRequest;
					}
				}
				return req;
			}
		
			function reloadLocations() {
				var selectedOu = parseInt(document.frm1.ou.value);
				var locSelect = getEl('loc');  
				// AJAX
				var xmlHttp = createXMLHttpRequest();
				xmlHttp.open('GET', 'backend.php?selectedOu=' + selectedOu, true);  
				xmlHttp.onreadystatechange = function () {
					if (xmlHttp.readyState == 4) {
						//Verarbeitung der Serverdaten (Wir gehen von JSON-Daten aus)
						data = eval('(' + xmlHttp.responseText + ')');  
						//alte auswahlmöglichkeiten entsorgen
						removeAllChilds(locSelect);
						//neue einfügen
						for (var i=0; i < data.length; i++) {
							var locItem = document.createElement("option");  
							locItem.setAttribute("value",i);  
							locItem.appendChild(document.createTextNode(data[i]));
							locSelect.appendChild(locItem);
						};
					}
				};
				xmlHttp.send(null);
			}
			
			function removeAllChilds (el) {
				if(el.hasChildNodes()) {
					while( el.childNodes.length >= 1) {
						el.removeChild(el.firstChild);
					}
				}
			}
			
			function getEl(e) {
				return document.getElementById(e);
			}
			
		</script>
		<form name="frm1">  
			Abteilung:
			<select name="ou" onchange="reloadLocations();">  
				<option value="0"></option>  
				<option value="1">IT</option>  
				<option value="2">Produktion</option>  
				<option value="3">Vertrieb</option>  
				<option value="4">Verwaltung</option>  
			</select>
			<br />
			Ort:
			<select name="loc" id="loc">  
			</select>
		</form>
	</body>
</html>

Die Datei backend.php:

<?php

	$allowedLocationsForOu = array(
		1 => array(1),
		2 => array(1,2,3),
		3 => array(1,3),
		4 => array(2)
		);
		
	$names = array('','Ort 1','Ort 2','Ort 3');  
	
	$currentAllowedLocations = $allowedLocationsForOu[$_GET['selectedOu']];  
	$returnArray = array();
	foreach ($currentAllowedLocations as $key) {
		$returnArray = $names[$key];
	}
	
	return json_encode($returnArray);
	
?>

Dafür brauchst du zumindest JavaScript (wenn du die Listen statisch pflegen kannst) oder Ajax falls du die Daten zur Laufzeit aus der Datenbank ziehen willst...

Hallo. Danke für die Antworten ...

Das mit dem js hat 1a funktioniert. danke.

Ich muss sagen, die Frage verstehe ich nicht

German solved Question JavaScript Development

Hotly discussed

Check of ZFW Firewallgleixnerd - 5 Comments

Wireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 Comments