
65999
07.04.2009, aktualisiert am 09.11.2016
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
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
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 113446
Url: https://administrator.de/forum/input-type-radio-bei-klick-auswahl-begrenzen-113446.html
Ausgedruckt am: 05.04.2025 um 07:04 Uhr
4 Kommentare
Neuester Kommentar
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>
<?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);
?>