[HaBo]

js88 · 01.05.06, 10:53

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:

Code:

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

und das entsprechende Script:

Code:

<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:

Code:

<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:

Code:

<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 · 01.05.06, 11:28

Versuch es mal so:
Ändere das hier:

Code:

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

zu:

Code:

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.

Anzeige

- Anzeige -

js88 · 01.05.06, 11:41

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 · 01.05.06, 11:53

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

also

Code:

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

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

LX · 01.05.06, 12:51

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:

Code:

<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:

Code:

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

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

js88 · 01.05.06, 13:13

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?

Anzeige

- Anzeige -

01.05.06, 11:28	#2 (permalink)
Lesco Senior Member Registriert seit: 03.09.05 Likes: 0	Versuch es mal so: Ändere das hier: Code: document.kontakt.feldName.style.color="#808080"; zu: Code: 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.

01.05.06, 11:53	#4 (permalink)
Lesco Senior Member Registriert seit: 03.09.05 Likes: 0	Verdammt, Tippfehler: Statt GetElementsByName() muss es getElementsByName() heißen. also Code: document.getElementsByName(feldName).style.color="#808080"; So müsste es eigentlich funktionieren ( den Formularnamen brauchst du auch nicht mehr, wenn du getElementsByName() verwendest.)

01.05.06, 12:51	#5 (permalink)
LX Moderator Registriert seit: 14.02.06 Likes: 21	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: Code: <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: Code: function activate ( element ) { element.value = ''; element.className = 'normal'; } function leave ( element, vorbelegung ) { if ( element.value == '' ) { element.value = vorbelegung; element.className = 'vorbelegung'; } } __________________ "Ever tried. Ever failed. No matter. Try again. Fail again. Fail better." - Samuel Beckett JS BB LX UP

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
C: Problem mit atomarer Funktion	mise	Code Kitchen	1	15.09.09 17:36
PgSQL: Tabellenname als Variable an Funktion uebergeben	keksinat0r	Code Kitchen	0	07.04.09 11:15
Problem in C++(srand Funktion)	Overflow.exe	Code Kitchen	4	25.11.07 22:48
Java - Problem mit if-then-else Funktion	freak100	Code Kitchen	4	20.09.07 19:42
Problem mit der Standby Funktion	Dj_Sefil	Die Problemzone	2	27.10.04 02:11

01.05.06, 11:41	#3 (permalink)
js88 Themenstarter Registriert seit: 24.05.05 Likes: 0	mit GetElementsByName: Fehler: document.kontakt.GetElementsByName is not a function und so wie ich es vorher hatte: Fehler: document.kontakt.feldName has no properties

01.05.06, 13:13	#6 (permalink)
js88 Themenstarter Registriert seit: 24.05.05 Likes: 0	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?

[HaBo]

Problem mit Funktion und Variable