nicht angemeldet
Input-Feld (un)sichtbar machen
Hallo zusammen!
Ich habe folgendes Problem und hoffe das mir jemand helfen kann. Ich sollte ein Input anhand dem Wert in einem Optionsfeld (<select>) sichtbar oder unsichtbar machen.
<select size='1' name="module7" onChange="changeModuleType(7)">
<option value="0">blah1</option>
<option value="1">blah2</option>
</select>   <INPUT NAME="number7" TYPE="text" VALUE="0" SIZE="3" onKeyup="if (window.moduleform.module7.value != 0) { UpdateShipData(); }">
Also zum Beispiel wenn ich in optionsfeld module7 option 0 auswähle soll input feld number7 sichtbar sein, wenn ich 1 auswähle soll es unsichtbar sein.
Ich habe schon Codebeispiele auf dieser Seite ausprobiert, hat aber nicht richtig hingehaut ... kann es sein das ich im css schon etwas für dieses Feld definiert haben muss, wenn ja wie sollte das aussehen zusammen mit dem HTML code?!
Danke im voraus!
-
Gugugg,
du könntest ja, da es sich um ein Textfeld handelt, den type von text auf hidden umwandeln, was allerdings wahrscheinlich vorraussetzt, dass du die Attributwerte ordnungsgemäß kleinschreibst:
function changeModuleType(num, selNum) {
module = document.getElementsByName('number' +num)[0];
switch (selnum) {
case '0':
module.setAttribute("type", "hidden");
break;
case '1':
module.setAttribute("type", "text");
break;
default:
break;
}
}<select size="1" name="module7" onChange="changeModuleType(7, this.selectedIndex.value)">
<option value="0">blah1</option>
<option value="1">blah2</option>
</select>   <input name="number7" type="text" value="0" size="3" onKeyup="if (window.moduleform.module7.value != 0) { UpdateShipData(); }" />
Gruß, Uschi
-
Hallo,
erstmal Danke für die Hilfe, ich hab jetzt ein bisschen rumexperimentiert, hatte aber keine chance das Zeug zum laufen zu bringen. Ich übergeben jetzt das Objekt an die Funktion, gebe vorher noch den Wert des Objekts aus (funktioniert einwandfrei), aber bei setAttribute sagt er "Dieser Befehl wird nicht unterstützt". Hier mal der Code ... es ist recht viel unnützes Zeug dabei, aber ich habe die Stelle weiter unten mit !!!FEHLER!!! markiert ;-).
Vielleicht könntest du mir mal eine kleine funktionierende hmtl seite hier rein kopieren? Damit ich besser abschätzen kann wo der Fehler liegen muss?
Danke,
Stefanfunction checkUniqueType(moduleId,noField) {
noFound = 0;
checkingType = 0;for (i=0; i<20; i++) {
if (uniquePerType[i] == moduleType[moduleId]) {
checkingType = moduleType[moduleId];
}
}if (checkingType == 0) { return true; }
for (i=0; i<17; i++) {
if (moduleType[document.getElementById("module"+i).value] == checkingType) { noFound++; }
}if (noFound > 1) {
if (checkingType == 2) {
alert('Für ein Schiff kann nur eine Panzerung ausgewählt werden!');
}
return false;
} else {
alert(noField.value);
noField.setAttribute("type","hidden"); <-- !!!FEHLER!!!
return true;
}
}// Funktion die das Objekt an die obere Funktion übergibt
function changeModuleType(slotNo) {
if (!checkUniqueType(document.getElementById("module"+slotNo).value,document.getElementById("number"+slotNo))) {
document.getElementById("module"+slotNo).value = 0;
}
UpdateModuleData(document.getElementById("module"+slotNo).value)
}-
Guggug
html-Code um deine Funktionen drumrumbauen kann ich so nicht, weil ich zu wenig durchblicke, was da welches Element sein soll.
Allerdings kannst du mit meinem Vorschlag, einfach das type-Attribut umzumodeln deshalb nix anfangen, weil der IE das nicht macht (Mozilla und Opera sehr wohl). Testen kannst du das, indem du den folgenden Code mal in allen dreien betrachtest.
<html>
<head>
<title></title>
<script language="JavaScript1.3" type="text/javascript">
function setVisibility(val) {
if(val == 0) {
document.getElementById('module7').setAttribute('type', 'hidden', true);
} else {
document.getElementById('module7').setAttribute('type', 'text', true);
}
}
</script>
</head>
<body>
<form name="myForm">
<select name="selModules" id="modules" onchange="setVisibility(this.selectedIndex.value)">
<option value="0">Bitte auswählen</option>
<option value="1">Modul 1</option>
<option value="2">Modul 2</option>
</select>
<input type="hidden" "name=module7" id="module7" value="7" />
<p id="par" align="left">Absatz zum zentrieren</p>
<input type="button" value="zentrieren" onclick="document.getElementById('par').setAttribute('align', 'center');" />
</form>
</body>
</html>Das align-Attribut des Absatzes ändert auch der IE artig, an das type-Attribut will er aber nicht ran. Das wusste ich leider auch noch nicht, aber frau lernt ja nie aus. Infolgedessen wirst du auf folgendes ausweichen müssen:
entweder document.getElementById('deinElement').style.visibility = 'hidden' respektive 'visible'
oder document.getElementById('deinElement').style.display = 'none' respektive 'inline' oder 'block'.Achtung, wenn ein Formular-Element via display auf none gesetzt worden ist, wird es von den mir bekannten Browsern beim Posten auch nicht mit übertragen, bei visibility auf hidden hingegen schon.
Ich würde dir im übrigen dringend empfehlen, die Mozilla zu installieren. Dort gibt es nämlich eine JavaScript-Konsole und gar einen richtigen Debugger, die wesentlich informativere Fehlermeldungen mit vor allem richtiger Zeilenzählung auspucken als der IE.
Ich hoffe, das hilft dir ein wenig weiter. Wenn nicht, musst du vielleicht doch mal etwas Code online stellen :-))
Gruß, Uschi
-
Guggug
Hallo,
html-Code um deine Funktionen drumrumbauen kann ich so nicht, weil ich zu wenig durchblicke, was da welches Element sein soll.
Das hätte ich eh nie von dir verlangt ;) Wollte nur ein Beispiel wie das was du eh geschrieben hast.
Das align-Attribut des Absatzes ändert auch der IE artig, an das type-Attribut will er aber nicht ran. Das wusste ich leider auch noch nicht, aber frau lernt ja nie aus. Infolgedessen wirst du auf folgendes ausweichen müssen:
entweder document.getElementById('deinElement').style.visibility = 'hidden' respektive 'visible'
oder document.getElementById('deinElement').style.display = 'none' respektive 'inline' oder 'block'.Danke! Funktioniert Spitze!
Ich würde dir im übrigen dringend empfehlen, die Mozilla zu installieren. Dort gibt es nämlich eine JavaScript-Konsole und gar einen richtigen Debugger, die wesentlich informativere Fehlermeldungen mit vor allem richtiger Zeilenzählung auspucken als der IE.
Danke für den Tipp! An Kompatibilität wirds an meiner Seite wahrscheinlich sowieso arg mangeln ... werd ich mal testen wenn ich mich auf den Inkompatibiltätsschock vorbereitet habe :))
Gruß, Uschi
Gruß & Danke,
Stefan
-
-
-