Ursprünglichen Zustand eines Input-Feldes wieder herstellen?

[*Markus]

Hallo,

ich habe zwei Formularfelder, wobei diese durch das Auswählen eines select-Feldes beeinflusst werden. Wird das select-Feld betätigt, sollen diese beiden Felder nicht mehr befüllbar sein und ausgegraut werden. Wird das select-Feld wieder zurückgesetzt, sollen die beiden Felder wieder befüllbar werden. Das funktioniert auch ganz gut. Nur bekomme ich das selbe Aussehen wie vorher nicht mehr hin.
So sieht's im ursprünglichen Zustand aus:

Nachdem folgende JS-Funktion aufgerufen wird....

  
function changeform(plz)   {  
	  if (plz != 0)  {  
	  	  document.kundenform.plz.disabled = true;  
	  	  document.getElementsByName("plz")[0].style.backgroundColor = '#AAA';  
	  	  document.getElementsByName("ort")[1].style.backgroundColor = '#AAA';  
	  	  document.kundenform.ort[1].disabled = true;  
	  	  
	  }  
	  else  {  
	  	 document.kundenform.plz.disabled = false;  
	  	 document.getElementsByName("plz")[0].style.backgroundColor = '#FFF';  
	  	 document.getElementsByName("ort")[1].style.backgroundColor = '#FFF';  
	  	 document.kundenform.ort[1].disabled = false;  
	  }  
}  

...sieht's so aus:

Wie bekomme ich das ursprüngliche Aussehen wieder hin?

Markus

[suit]

Wie bekomme ich das ursprüngliche Aussehen wieder hin?

Geschickter wäre es, eine Klasse hinzuzufügen oder zu entfernen.

input[disabled] würde ja für einen ordentlichen Browser reichen, aber für den antiken Internet Exploder muss input.disabled her.

[*Markus]

Hallo,

Geschickter wäre es, eine Klasse hinzuzufügen oder zu entfernen.

input[disabled] würde ja für einen ordentlichen Browser reichen, aber für den antiken Internet Exploder muss input.disabled her.

Wie müsste ich dies in CSS definieren und in Javascript ansprechen?

Markus

[suit]

Wie müsste ich dies in CSS definieren und in Javascript ansprechen?

  
input {  
  border: 1px solid green;  
}  
  
input.foo {  
  border: 1px solid red;  
}

Die Klassen manipulieren kannst du mit http://de.selfhtml.org/javascript/objekte/all.htm#class_name.

Aktuell hast du lediglich eine CSS-Eigenschaft, aber wenn du mehrere veränderst, wirds kompliziert - dann hast du je CSS-Eigenschaft eine Zeile mehr im JavaScript. Imho ist es aber besser, alle Formatierungsangaben gemeinsam im CSS zu haben und nicht zerstückelt auf mehrer Baustellen.

Darum sollte man prinzipiell immer mit JavaScript lediglich Klassen hinzufügen/entfernen und nicht CSS-Eigenschaften setzen/zurücksetzen (wenn es nicht unbedingt notwendig ist)

[*Markus]

Hallo,

input {
  border: 1px solid green;
}

input.foo {
  border: 1px solid red;
}

>   
  
Wenn ich das nun richtig verstanden habe, habe ich aber für die Zustände enable und disabled einfach nur irgendwelche Eigenschaften zugewiesen. So gesehen wäre es ja auch einfach, wieder den ursprüngliche Zustand herzustellen, indem man einfach nur wieder die andere Klasse zuweist. In meinem Fall geht es aber nicht darum, bereits definierte Eigenschaften wieder herzustellen, sondern "Grundeinstellungen" wieder herbeizuführen, die nie irgendwo im CSS angegeben wurde.  
Vielleicht würde es funktionieren, wenn ich input[disabled] und input[enabled] im CSS definieren würde, aber wie kann ich solche Deklarationen in JS ansprechen?  
  
Markus  

[suit]

Wenn ich das nun richtig verstanden habe, habe ich aber für die Zustände enable und disabled einfach nur irgendwelche Eigenschaften zugewiesen. So gesehen wäre es ja auch einfach, wieder den ursprüngliche Zustand herzustellen, indem man einfach nur wieder die andere Klasse zuweist. In meinem Fall geht es aber nicht darum, bereits definierte Eigenschaften wieder herzustellen, sondern "Grundeinstellungen" wieder herbeizuführen, die nie irgendwo im CSS angegeben wurde.

Dann gibts halt in deinem CSS "nichts" und Formatierungen für Elemente mit der Klasse "definiert" - wenn die Klasse vorhanden ist: speziell, wenn nicht "Grundeinstellungen"

Vielleicht würde es funktionieren, wenn ich input[disabled] und input[enabled] im CSS definieren würde, aber wie kann ich solche Deklarationen in JS ansprechen?

input[enabled]ist Unsinn, da dieses Attribut nicht existiert - disabled hingegen schon - ggf. möchtest du dich mit Attribut-Selektoren auseinanderstzen. Aber wie gesagt: im IE6 wird das nicht funktionieren, darum die Klasse.

[*Markus]

Hallo,

ggf. möchtest du dich mit Attribut-Selektoren auseinanderstzen. Aber wie gesagt: im IE6 wird das nicht funktionieren, darum die Klasse.

Ja, das soltle ich glaube ich auch allmählich tun. Mein CSS ist schon massiv eingerostet :(

Markus

[Patrick Andrieu]

Hallo *Markus!

[border bei Inputfeldern wiederherstellen]

Ich stand vor einem ähnlichen Problem, das ich wie folgt löste:

function removeRedBorder(field) {  
  field.style.border = navigator.appName.indexOf('Explorer') != -1 ? "2px inset" : "";  
  field.style.borderColorLeft = "";  
}

In meinem Skript wurden bei Fehleingaben die Felder rot umrandet, daher der Funktionsname. »field« ist das entsprechende Element, in dem Fall ein Inputfeld. Das mit inset und borderColorLeft hatte ich damals ergooglet (ist schon länger her, dass ich das Skript schrieb, daher auch die Hälfte vergessen!) :)

Viele Grüße aus Frankfurt/Main,
Patrick

[*Markus]

Hallo,

danke, aber mache ich es so (wobei man hier noch dazu browserspezifisch arbeiten muss) sieht es erst nicht wie im ursprünglichen Zustand aus. Man sieht, dass der Rand dadurch beeinflusst wird, aber selbst bei der Angaben 1px sieht's immer noch nicht wie vorher aus.

Markus

[Struppi]

Wie bekomme ich das ursprüngliche Aussehen wieder hin?

In dem du den Werten, die du verändert hast, einen Leerstring zuweist.

Struppi.

[*Markus]

Hallo,

In dem du den Werten, die du verändert hast, einen Leerstring zuweist.

Die einfachste Lösung ist wieder mal die beste. Danke, so klappt's :)

VG
Markus

[suit]

Die einfachste Lösung ist wieder mal die beste.

Solange du nur eine Eigenschaft hinzufügst oder entfernst ja - spätestens bei der zweiten Eigenschaft solltest du dich aber _dringend_ mit dem Klasse hinzufügen/entfernen beschäftigen.

Die einfachste Lösung ist halt meistens doch nur augenscheinlich die beste Lösung.

[*Markus]

Solange du nur eine Eigenschaft hinzufügst oder entfernst ja - spätestens bei der zweiten Eigenschaft solltest du dich aber _dringend_ mit dem Klasse hinzufügen/entfernen beschäftigen.

Ok, ich werde es in Zukunft beherzigen.

VG
Markus