Problem mit Funktion und Variable

[js88]

Folgendes Problem:

Ich arbeite an einem Kontaktformular, bei dem die Vorbelegung der beim Anklicken verschwindet und beim Verlassen (sofern das jeweilige Feld nicht ausgefüllt wurde) wieder auftaucht. Bisher habe ich das so gelöst:

<form name="kontakt" method="post" action="senden.php">
<input type="text" value="Vorname" onFocus="vornameAktiv()" onBlur="vornameLeave()">
</form>

und das entsprechende Script:

<script type="text/javascript">

var vorname = "0";

function vornameAktiv() {
if (vorname == '0') {
document.kontakt.vorname.value = "";
}
vorname = "1";
document.kontakt.vorname.style.color="#000000";
document.kontakt.vorname.style.fontStyle="normal";
}

function vornameLeave() {
if (document.kontakt.vorname.value == '') {
document.kontakt.vorname.style.color="#808080";
document.kontakt.vorname.style.fontStyle="italic";
document.kontakt.vorname.value="Vorname";
vorname = "0";
}
}

</script>

In dieser Art funktioniert das auch, aber ich brauche für jedes weitere Eingabefeld 2 weitere Funktionen und das wird dann etwas unübersichtlich. Ich habe jetzt überlegt das so zu lösen:

<form name="kontakt" method="post" action="senden.php">
<input type="text" value="Vorname" onFocus="aktiv(vorname,'vorname')" onBlur="vorname=leave(vorname,'vorname','Vorname')">
</form>

und das Script:

<script type="text/javascript">

var vorname = "0";

function aktiv(feldVar,feldName) {
if (feldVar == '0') {
document.kontakt.feldName.value = "";
document.kontakt.feldName.style.color="#000000";
document.kontakt.feldName.style.fontStyle="normal";
}
}

function leave(feldVar,feldName,feldWert) {
if (document.kontakt.feldName.value == '') {
document.kontakt.feldName.style.color="#808080";
document.kontakt.feldName.style.fontStyle="italic";
document.kontakt.feldName.value=feldWert;
feldVar = "0";
} else {
feldVar = "1";
}
return feldVar;
}

</script>

Vom Prinzip her soll das so laufen: ich benötige nur noch 2 Funktionen. Dafür werden die jeweilige Variable des Feldes (feldVar), die den Zustand des Feldes speichert (0 für nicht ausgefüllt und 1 für ausgefüllt), der Feldname (feldName), der den Namen des betroffenen Feldes übergibt und bei leave() auch die Vorbelegung des Feldes (feldWert) übergeben. Dadurch sollen die Funktionen (mit den entsprechenden Variablen) bei jedem Feld funktionieren und es gibt nicht mehr für jedes einzelne Feld zwei extra Funktionen.
Aber irgendwie funktioniert das nicht. Kann mir jemand meine Fehler zeigen?

 

[Lesco]

Versuch es mal so:
Ändere das hier:

document.kontakt.feldName.style.color="#808080";

zu:

document.kontakt.GetElementsByName(feldName).style.color="#808080";

(Und ersetze das auch bei den anderen Zeilen entsprechend.)

Ich weiß auch nicht, ob dein Vorhaben mit 'feldVar' so funktioniert.(bin mir nicht sicher)

Ansonsten mach mal die Javascript-Konsole auf(falls du FF hast) und poste hier mal die Fehler.

 

[js88]

mit GetElementsByName:

Fehler: document.kontakt.GetElementsByName is not a function

und so wie ich es vorher hatte:

Fehler: document.kontakt.feldName has no properties

 

[Lesco]

Verdammt, Tippfehler:
Statt GetElementsByName() muss es getElementsByName() heißen.

also

document.getElementsByName(feldName).style.color="#808080";

So müsste es eigentlich funktionieren ( den Formularnamen brauchst du auch nicht mehr, wenn du getElementsByName() verwendest.)

 

[LX]

Ich würde es lieber mit CSS-Klassen lösen, also eine Klasse .vorbelegung und eine Klasse .normal, die du dann abhängig vom Zustand zuweist. Könnte etwa so aussehen:

<input type="text"
       value="Hier eintragen"
       name="wasweissich"
       onfocus="activate(this)"
       onblur="leave(this,'Hier eintragen')" />

Auf diese Art und Weise sparst du dir das Gehangel durch den DOM-Baum, da du das Element mit this direkt an die Funktionen übergibst. Der zweite Parameter hier sei einfach mal die Vorbelegung. Die Funktionen sähen dann etwa so aus:

function activate ( element )
{
    element.value = '';
    element.className = 'normal';
}

function leave ( element, vorbelegung )
{
    if ( element.value == '' )
    {
        element.value = vorbelegung;
        element.className = 'vorbelegung';
    }
}

 

[js88]

Vielen Dank ihr zwei. Habs ausprobiert und es funktioniert beides, die zweite Lösung gefällt mir allerdings auch besser (ist einfach kürzer und übersichtilicher). Ich werde mich jetzt mal dranmachen, das ganze Formular darauf umzustellen ...

Gruß
Jonas

PS: Da fällt mir noch was ein: gibt es eine Möglichkeit per getElementsByTagName() auf alle Felder des Typs "text" zuzugreifen und gibt es eine Möglichkeit mit CSS nur die Radiobuttons zu formatieren?