enable / disable

wal

wal

Erfahrenes Mitglied
Hallo,

ich bastel gerade an einem Formular rum, das eine Menge Radiobuttons besitzt. Klicke ich auf einen Radiobutton, so werden für diesen weitere Checkboxen und Textfelder freigeschaltet.

Klicke ich nun auf einen anderen Radiobutton, sollen die vorhergehenden Checkboxen und Textfelder disabled und die neuen Checkboxen und Textfelder enabled werden.

Das enablen klappt ohne Probleme, nur das disablen ist dann ein Problem. die vorhergehenden Checkboxen und Textfelder bleiben leider enabled.

Da es sich um eine Menge Radios handelt, habe ich versucht dies mit einer For-Schleife zu lösen, doch das funktioniert nicht so richtig - vielleicht geht es auch nicht so?!

Hier mal der Scriptcode von Javascript:

PHP: 
<script language="JavaScript" type="text/javascript">
<!--
function enableACD() {
	var sonstigeTelefon=new Array("falscheeinstellungen","kabeldefekt","filterreinigung","wartung","sonstiges2");
	window.document.formular.leitung.disabled = false;
	window.document.formular.einstellungen.disabled = false;
	window.document.formular.sonstiges1.disabled = false;
	for (i=0; i<=(sonstige.length-1); i++){
		window.document.formular.sonstige[i].disabled = true;
	}
}
function enableBeamer() {
	var sonstigeBeamer=new Array("leitung","einstellungen","sonstiges1");
	window.document.formular.falscheeinstellungen.disabled = false;
	window.document.formular.kabeldefekt.disabled = false;
	window.document.formular.filterreinigung.disabled = false;
	window.document.formular.wartung.disabled = false;
	window.document.formular.sonstiges2.disabled = false;
	for (i=0; i<=(sonstigeBeamer.length-1); i++){
		window.document.formular.sonstigeBeamer[i].disabled = true;
	}
}
//-->
</script>

Schreibe ich den Code nun wie folgt ohne for-Schleife:
PHP: 
<script language="JavaScript" type="text/javascript">
<!--
function enableACD() {
	window.document.formular.leitung.disabled = false;
	window.document.formular.einstellungen.disabled = false;
	window.document.formular.sonstiges1.disabled = false;
	window.document.formular.falscheeinstellungen.disabled = true;
	window.document.formular.kabeldefekt.disabled = true;
	window.document.formular.filterreinigung.disabled = true;
	window.document.formular.wartung.disabled = true;
	window.document.formular.sonstiges2.disabled = true;
}
function enableBeamer() {
	var sonstigeBeamer=new Array("leitung","einstellungen","sonstiges1");
	window.document.formular.falscheeinstellungen.disabled = false;
	window.document.formular.kabeldefekt.disabled = false;
	window.document.formular.filterreinigung.disabled = false;
	window.document.formular.wartung.disabled = false;
	window.document.formular.sonstiges2.disabled = false;
	window.document.formular.leitung.disabled = true;
	window.document.formular.einstellungen.disabled = true;
	window.document.formular.sonstiges1.disabled = true;
}
//-->
</script>

funktioniert es wunderbar. Allerdings bläht es den Code so sehr auf.

Kann mir jemand sagen, was an der Syntax falsch ist oder eventuell geht es ja gnaz anders?

Vielen Dank schon mal vorab für Hilfen oder Tipps.
 
Hi,

schreib Deine for-Schleifen mal wie folgt:
Code: 
var myObj = document.forms['formular'];

for (i=0; i<sonstigeBeamer.length; i++){
    for(j=0; j<myObj.elements[sonstigeBeamer[i]].length; j++){
        // Falls es sich um eine Checkbox oder einen RadioButton handelt
        if((myObj.elements[sonstigeBeamer[i]][j].type == "checkbox") || (myObj.elements[sonstigeBeamer[i]][j].type == "radio"))
            myObj.elements[sonstigeBeamer[i]][j].checked = false;
    }
    // Falls es sich um ein Textfeld handelt
    if(myObj.elements[sonstigeBeamer[i]].type == "text")
    myObj.elements[sonstigeBeamer[i]].disabled = true;
}
Ciao
Quaese
 
Hi Quaese,

vielen Dank für deine Hilfe und den Code. Leider funktioniert es noch nicht so ganz. Ich habe mal in den Code mir die Werte anzeigen lassen. Es werden leider immer noch die falschen Werte angezeigt.

Code: 
var sonstigeBeamer=new Array("leitung","einstellungen","sonstiges1");
var myObj = document.forms['formular'];

for (i=0; i<sonstigeBeamer.length; i++){
	for(j=0; j<myObj.elements[sonstigeBeamer[i]].length; j++){
	// Falls es sich um eine Checkbox oder einen RadioButton handelt
	if((myObj.elements[sonstigeBeamer[i]][j].type == "checkbox") || (myObj.elements[sonstigeBeamer[i]][j].type == "radio"))
		myObj.elements[sonstigeBeamer[i]][j].disabled = true;
		var text = sonstigeBeamer[i];
//		var text = myObj.elements[sonstigeBeamer[i]];
		window.alert(text);
	}
	// Falls es sich um ein Textfeld handelt
	if(myObj.elements[sonstigeBeamer[a]].type == "text")
	    myObj.elements[sonstigeBeamer[a]].disabled = true;
	}

Mit window.alert erhalte ich immer den zweiten Wert aus dem Array, also einstellungen. Lasse ich mir das mit myObj. ... anzeigen, erhalte ich immer im aufgehenden Dialog. Zumindest funktioniert der Schleifendruchlauf aber. Ich habe auch mal probiert oben bei der for-Schleife bei length mit -1 zu arbeiten, das brachte aber auch nichts.

Hast du noch eine Idee?:confused:

Ist eventuell der Offset falsch?
 
Hi,

bei mir funktioniert das wunderprächtig.

Du hast im Teil, in dem die Textfelder abgearbeitet werden, sonstigeBeamer[a]
geschrieben - das muss aber sonstigeBeamer[i] lauten.

Mit dem Offset stimmt auch alles. Du müsstest hinter die erste if-Anweisung eine
geschweifte Klammer setzen und die Anweisung hinter window.alert(...) ebenfalls
mit einer Klammer wieder abschliessen. Ich habe die Klammern nur weggelassen,
da dies bei einzeiligen Anweisungen erlaubt ist.

Das er den ersten Wert in "sonstigeBeamer" nicht anzeigt, kann daran liegen, dass
das erste Element in Deinem Formular ein Textfeld ist. Diese werden erst im zweiten
Teil der Funktion abgearbeitet. Willst Du dir diese auch mit window.alert(..) anzeigen
lassen, müsstest du den Anweisungsblock hinter der der zweiten if-Bedingung
ebenfalls in Klammern setzen und den Text mit alert ausgeben.

Ciao
Quaese
 
Hi,

huups .. schnelle Antwort :-) Vielen Dank!

Also anbei nochmals der korrekte Code. Das mit dem [a] ist leider mit reingerutscht beim Rumprobieren und ich hatte es beim Korrigieren übersehen - sorry:-(

Korrigierter Code:
PHP: 
	var sonstigeBeamer=new Array("leitung","einstellungen","sonstiges1");
	var myObj = document.forms['formular'];

	for (i=0; i<sonstigeBeamer.length; i++){
		for(j=0; j<myObj.elements[sonstigeBeamer[i]].length; j++){
		// Falls es sich um eine Checkbox oder einen RadioButton handelt
			if((myObj.elements[sonstigeBeamer[i]][j].type == "checkbox") || (myObj.elements[sonstigeBeamer[i]][j].type == "radio")) {
				myObj.elements[sonstigeBeamer[i]][j].disabled = true;
				var text = sonstigeBeamer[i];
				// var text = myObj.elements[sonstigeBeamer[i]];
				window.alert(text);
			}
		}
	// Falls es sich um ein Textfeld handelt
		if(myObj.elements[sonstigeBeamer[i]].type == "text")
	    myObj.elements[sonstigeBeamer[i]].disabled = true;
	}

Ich glaube dir schon, dass das bei dir alles funktioniert. Sieht auch für mich gut aus ... hmmm ist wirklich ein Phänomen. Bin jetzt auch ratlos:mad:

Das mit den Klammer brachte leider auch nicht den Erfolg.
Ich glaube nun wird's schwierig, denn ich kenne nun keine Variante mehr, die ich nicht ausprobiert habe.....
 
Vielleicht befindet sich in dem Formular kein radio/checkbox mit dem Namen "leitung"... das wäre zumindest eine mögliche Erklärung.

Das Skript läuft bei mir auch einwandfrei, der Fehler dürfte auf jeden Fall nicht im Skript zu finden sein.
 
Hi,

noch ein Script. Das sollte zumindest für alle Array-Einträge aus "sonstigeBeamer"
ein Ausgabefenster mit dem jeweiligen Formular-Element-Typ ausgeben.

Vielleicht handelt es sich ja tatsächlich um ein anderes Element als Radio, Checkbox
oder Textfeld.

Schau's Dir einfach mal an.
Code: 
var sonstigeBeamer=new Array("leitung","einstellungen","sonstiges1"); 
var myObj = document.forms['formular'];

var i=0;
var j=0;

for (i=0; i<sonstigeBeamer.length; i++){

    // Falls es sich um ein Array-Formularelement handelt
    if(myObj.elements[sonstigeBeamer[i]].length > 0){

        if((myObj.elements[sonstigeBeamer[i]][0].type == "checkbox") || (myObj.elements[sonstigeBeamer[i]][0].type == "radio")) {
            for(j=0; j<myObj.elements[sonstigeBeamer[i]].length; j++){
                myObj.elements[sonstigeBeamer[i]][j].disabled = true;
                var text = sonstigeBeamer[i];
                window.alert(text + " - " + myObj.elements[sonstigeBeamer[i]][j].type);
            }  // ENDE - for(j=0)
        }  // ENDE - if(checkbox, radiobutton)

    // Kein Array-Formularelement
    }else{
        // Falls es sich um ein Textfeld handelt
        if(myObj.elements[sonstigeBeamer[i]].type == "text"){
            myObj.elements[sonstigeBeamer[i]].disabled = true;
            alert(sonstigeBeamer[i] + " - " + myObj.elements[sonstigeBeamer[i]].type);
        }else{
            alert(sonstigeBeamer[i] + " - " + myObj.elements[sonstigeBeamer[i]].type);
        }  // ENDE - if-else(textfeld)
    }  // ENDE - if-else(length>0)
}  // ENDE for(i=0)
Vielleicht ist das Element einstellungen eine textarea?

Ciao
Quaese
 
Hallo,

also ersteinmal vielen Dank für eueren Einsatz und eure Hilfen. Leider funktioniert das immer noch nicht. Ich habe langsam die Befürchtung es liegt an meinem IE (6+SP1). Also letzte Tat, werde ich mal mein Demoscript hier Posten, evetuell könnt ihr das mal kurz checken und mir Feedback geben, ob es bei euch funktioniert oder nicht. Es wäre nett, wenn ihr mir kurz euren Browser nennen könnten für die Tests.

Ich muss mich schon jetzt sehr für eure Hilfe bedanken! ;) :p

Das ganze natürlich nur, wenn ihr wollt bzw. kurz Zeit habt - aber das ist ja klar!

Vorgehensweise:

1. Ich klicke auf den Radiobutton ACD Telefon. Damit kann ich dann die beiden, rechts davon, Checkboxen und das Textfeld freischalten.

2. Nun klicke ich den Radiobutton Beamer. Jetzt werden die Checkboxen und das Textfeld rechts neben dem Beamer enabled. Die Checkboxen und das Textfeld vom ACD Telefon sollten dann aber auch wieder disabled werden - dis funktioniert aber nicht. Jedenfalls nicht mit der For-Schleife bei mir :mad:

3. Klicke ich wieder auf das ACD Telefon, werden die Checkboxen des Telefons und das Textfeld wieder enabled und die des Beamers wieder disabled. Hier funktioniert dies, da ich hierbei keine For-Schleife verwendet habe.

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<script language="JavaScript" type="text/javascript">
<!--
function enableACD() {
	window.document.formular.leitung.disabled = false;
	window.document.formular.einstellungen.disabled = false;
	window.document.formular.sonstiges1.disabled = false;
	window.document.formular.falscheeinstellungen.disabled = true;
	window.document.formular.kabeldefekt.disabled = true;
	window.document.formular.filterreinigung.disabled = true;
	window.document.formular.wartung.disabled = true;
	window.document.formular.sonstiges2.disabled = true;
}
function enableBeamer() {
	window.document.formular.falscheeinstellungen.disabled = false;
	window.document.formular.kabeldefekt.disabled = false;
	window.document.formular.filterreinigung.disabled = false;
	window.document.formular.wartung.disabled = false;
	window.document.formular.sonstiges2.disabled = false;

	var sonstigeBeamer=new Array("leitung","einstellungen","sonstiges1"); 
	var myObj = document.forms['formular'];
	
	var i=0;
	var j=0;
	
	for (i=0; i<sonstigeBeamer.length; i++){
	
		// Falls es sich um ein Array-Formularelement handelt
		if(myObj.elements[sonstigeBeamer[i]].length > 0){
	
			if((myObj.elements[sonstigeBeamer[i]][0].type == "checkbox") || (myObj.elements[sonstigeBeamer[i]][0].type == "radio")) {
				for(j=0; j<myObj.elements[sonstigeBeamer[i]].length; j++){
					myObj.elements[sonstigeBeamer[i]][j].disabled = true;
					var text = sonstigeBeamer[i];
					window.alert(text + " - " + myObj.elements[sonstigeBeamer[i]][j].type);
				}  // ENDE - for(j=0)
			}  // ENDE - if(checkbox, radiobutton)
	
		// Kein Array-Formularelement
		}else{
			// Falls es sich um ein Textfeld handelt
			if(myObj.elements[sonstigeBeamer[i]].type == "text"){
				myObj.elements[sonstigeBeamer[i]].disabled = true;
				alert(sonstigeBeamer[i] + " - " + myObj.elements[sonstigeBeamer[i]].type);
			}else{
				alert(sonstigeBeamer[i] + " - " + myObj.elements[sonstigeBeamer[i]].type);
			}  // ENDE - if-else(textfeld)
		}  // ENDE - if-else(length>0)
	}  // ENDE for(i=0)

// Version 2 - funktioniert nicht, da Browser nicht mit [sonstigeBeamer[i]][j] in der for-Schleife klar kommt. Springt sofort wieder raus
/*	for (i=0; i<sonstigeBeamer.length; i++){
		for(j=0; j<myObj.elements[sonstigeBeamer[i]].length; j++){
		// Falls es sich um eine Checkbox oder einen RadioButton handelt
			if((myObj.elements[sonstigeBeamer[i]][j].type == "checkbox") || (myObj.elements[sonstigeBeamer[i]][j].type == "radio")) {
				myObj.elements[sonstigeBeamer[i]][j].disabled = true;
			}
		}
	// Falls es sich um ein Textfeld handelt
		if(myObj.elements[sonstigeBeamer[i]].type == "text")
	    myObj.elements[sonstigeBeamer[i]].disabled = true;
	}
*/

// Version 1 - geht nicht, da Browser nicht mit sonstigeBeamer[i] in for-schleife klar kommt
/*	for (i=0; i<sonstigeBeamer.length; i++){
	    window.document.formular.sonstigeBeamer[i].disabled = true;
	}
*/
}
//-->
</script>
</head>
<body>
<form name="formular" action="formular_call_hardware.php" method="post">
  <table border="1" cellpadding="2" cellspacing="0" width="100%" bordercolor="#C0C0C0">
    <tr>
      <td  colspan="2" class="t_content" bgcolor="#E6B50B"><span class="blue_bold">Persönliche Daten des Call-Verfassers</span></td>
    </tr>
    <tr>
      <td  class="t_content" width="150">Vorname:
        <!-- vornamefehler --></td>
      <td  class="t_content"><input name="vorname" type="text" id="vorname" size="20"></td>
    </tr>
    <tr>
      <td  class="t_content">Name:
        <!-- nachnamefehler --></td>
      <td  class="t_content"><input name="nachname" type="text" id="nachname" size="20">
&nbsp;</td>
    </tr>
    <tr>
      <td  class="t_content" valign="top" align="left">SLx:
        <!-- slxfehler --></td>
      <td  class="t_content"><input name="slx" type="text" id="slx" size="5"></td>
    </tr>
    <tr>
      <td  class="t_content">Rechner:
        <!-- rechnerfehler --></td>
      <td  class="t_content"><input name="rechner" type="text" id="rechner" size="10"></td>
    </tr>
    <tr>
      <td  class="t_content">Bereich:
        <!-- bereichfehler --></td>
      <td  class="t_content"><input name="bereich" type="text" id="bereich" size="20"></td>
    </tr>
    <tr>
      <td  class="t_content">Durchwahl:
        <!-- durchwahlfehler --></td>
      <td  class="t_content"><input name="durchwahl" type="text" id="durchwahl" size="5"></td>
    </tr>
  </table>
  <br>
  <table border="1" cellpadding="2" cellspacing="0" width="100%" bordercolor="#C0C0C0">
    <tr>
      <td  class="t_content" bgcolor="#E6B50B"><span class="blue_bold">Arbeitsumgebung</span>
        <!-- arbeitsumgebungfehler --></td>
    </tr>
    <tr>
      <td  class="t_content" valign="middle"><input type="radio" name="arbeitsumgebung" value="Produktionsumgebung">
        Produktionsumgebung &nbsp;&nbsp;
        <input type="radio" name="arbeitsumgebung" value="Non Production">
        Non Production</td>
    </tr>
  </table>
  <br>
  <table border="1" cellpadding="2" cellspacing="0" width="100%" bordercolor="#C0C0C0">
    <tr>
      <td  class="t_content" bgcolor="#E6B50B"><span class="blue_bold">Hardwareprobleme oder -st&ouml;rungen</span></td>
    </tr>
  </table>
  <br>
  <table border="1" cellpadding="2" cellspacing="0" width="100%" bordercolor="#C0C0C0">
    <tr>
      <td  class="t_content" width="180" valign="top"><input type="radio" name="hardware" value="ACD Telefon" onClick="enableACD();">
        ACD Telefon</td>
      <td><table>
          <tr>
            <td width="180" height="25"  class="t_content"><input name="leitung" type="checkbox" id="leitung" value="Leitung" disabled="disabled">
              Leitung </td>
          </tr>
          <tr>
            <td  class="t_content" width="180" ><input name="einstellungen" type="checkbox" id="einstellungen" value="Einstellungen" disabled="disabled">
              Einstellungen </td>
          </tr>
          <tr>
            <td  class="t_content" ><textarea name="sonstiges1" cols="50" id="textarea" disabled="disabled">Textfeld für Problembeschreibung</textarea></td>
          </tr>
        </table>
    </tr>
    <tr> </tr>
  </table>
  <br>
  <table border="1" cellpadding="2" cellspacing="0" width="100%" bordercolor="#C0C0C0">
    <tr>
      <td  class="t_content" width="180"  valign="top"><input type="radio" name="hardware" value="Beamer" onClick="enableBeamer();">
        Beamer</td>
      <td><table>
          <tr>
            <td  class="t_content" width="180"><input name="falscheeinstellungen" type="checkbox" id="falscheeinstellungen" value="Falsche Einstellungen" disabled="disabled">
              Falsche Einstellungen</td>
          </tr>
          <tr>
            <td  class="t_content" width="180" ><input name="kabeldefekt" type="checkbox" id="kabeldefekt" value="Kabel defekt" disabled="disabled">
              Kabel defekt </td>
          </tr>
          <tr>
            <td  class="t_content" width="180"><input name="filterreinigung" type="checkbox" id="filterreinigung" value="Filterreinigung" disabled="disabled">
              Filterreinigung</td>
          </tr>
          <tr>
            <td  class="t_content" width="180"><input name="wartung" type="checkbox" id="wartung" value="Wartung" disabled="disabled">
              Wartung</td>
          </tr>
          <tr>
            <td  class="t_content" ><textarea name="sonstiges2" cols="50" id="textarea" disabled="disabled">Textfeld für Problembeschreibung</textarea></td>
          </tr>
        </table>
    </tr>
  </table>
  <br>
  <br>
  <input type="submit" value="Sofort Senden" name="senden">
&nbsp;
  <input type="submit"  value="Bild / Dokument hinzufügen" name="bild">
&nbsp;
  <input type="submit" value="Zurücksetzen" name="delete">
</form>
</body>
</html>

Wie gesagt, es wäre toll, wenn es jemand mal gegen Testen könnte!

Ich bin so langsam am verzweifeln. Kann soetwas auch am HTML Code liegen?:eek:

Vielen Dank!
 
Hi,

es handelt sich bei "sonstiges1" tatsächlich um ein textarea!

Ändere die folgende if-Anweisung
Code: 
if(myObj.elements[sonstigeBeamer[i]].type == "text")
dahingehend, dass auch Textareas, RadioButtons und Checkboxen
berücksichtigt werden.
Code: 
if((myObj.elements[sonstigeBeamer[i]].type == "text")||(myObj.elements[sonstigeBeamer[i]].type == "textarea") || (myObj.elements[sonstigeBeamer[i]].type == "checkbox") || (myObj.elements[sonstigeBeamer[i]].type == "radio"))
Damit sollte es nun endgültig funktionieren.

Ciao
Quaese
 
Hi Quaese,

super, vielen Dank für deine Antworten

Ja, nun funktioniert es und wieder etwas dazugelernt :-) :-)

Ich frage mich nur noch, warum meine erste Version, der Dreizeiler, nicht funktioniert hat und ich hier unbedingt mit myObj abrbeiten muss?
Ich habe auch mal versucht deine Schleifen zu verkleinern und weniger Abfragen hinzubekommen ... aber das ging nicht?!

Aber schon mal vielen Dank - hat mir sehr geholfen!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück