Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: HTML, CSS und PHP Forum - HTML Tutorial. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

Yamram

Sonderfall

Beiträge: 1 274

Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink

Beruf: professioneller Kickboxer

  • Private Nachricht senden

21

Samstag, 21. Januar 2012, 19:48

Re: Problem beim erweitern des formulars mit JavaScript

Naja, wenigstens funktioniert es jetzt tadellos ;)

22

Samstag, 21. Januar 2012, 19:49

Re: Problem beim erweitern des formulars mit JavaScript

Wie wäre es, der Funktion einen Parameter mit der id der zu leerenden Box zu übergeben, dann brauchst du nur eine Funktion, die beliebige Felder leert.
Das Typ Ändern könntest du dann als weiteren Parameter machen, der entweder true (Typ ändern) oder false (Typ nicht ändern) sein kann.

Damit brauchst du dann nur eine Funktion.

Yamram

Sonderfall

Beiträge: 1 274

Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink

Beruf: professioneller Kickboxer

  • Private Nachricht senden

23

Samstag, 21. Januar 2012, 19:50

Re: Problem beim erweitern des formulars mit JavaScript

Ja, da hat Sören Recht ;)

Außerdem ist folgendes doof: Wenn ich zum Beispiel Username eingebe und dann "rausgehe" und dann wieder reingehe um etwas zu korrigieren dann ist alles weg. Das solltest du korrigieren!

24

Samstag, 21. Januar 2012, 20:04

Re: Problem beim erweitern des formulars mit JavaScript

Zitat von »"Sören"«

Wie wäre es, der Funktion einen Parameter mit der id der zu leerenden Box zu übergeben, dann brauchst du nur eine Funktion, die beliebige Felder leert.
Das Typ Ändern könntest du dann als weiteren Parameter machen, der entweder true (Typ ändern) oder false (Typ nicht ändern) sein kann.

Damit brauchst du dann nur eine Funktion.



wie soll ich das achen? bzw. wie übergibt man zum beispiel die id?
bin javascript noob^^


Mir würde jetzt nur einfallen:

Quellcode

1
<input type="text" onclick="meine_funktion(document.getElementById('benutzername').id);" />


richtiger gedankengang? o.O

Yamram

Sonderfall

Beiträge: 1 274

Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink

Beruf: professioneller Kickboxer

  • Private Nachricht senden

25

Samstag, 21. Januar 2012, 20:07

Re: Problem beim erweitern des formulars mit JavaScript

Nein, das ist sinnlos. Im Parameter übergibst du einfach nur die ID und dann sieht die Funktion so aus:

Quellcode

1
2
3
function Clear(id) {
...jetzt ist der Parameter einfach unter der Variable id zu erreichen...
}


Dann packst du einfach die ID des Elements darein

Quellcode

1
onclick="Clear(passwort);"


und fertig...

26

Samstag, 21. Januar 2012, 20:09

Re: Problem beim erweitern des formulars mit JavaScript

Zitat von »"Yamram"«

onclick="Clear(passwort);"


achso und dann inner funktion if abfragen machen, also wenn übergabe wert == ... und so weiter?

27

Samstag, 21. Januar 2012, 20:11

Re: Problem beim erweitern des formulars mit JavaScript

Aber bitte

Quellcode

1
onclick="Clear('passwort');"
(mit Anführungszeichen)

In der Funktion dann einfach

Quellcode

1
2
3
function Clear(id) {
    document.getElementById(id).value = "";
}

Basiii

Wachhund

Beiträge: 1 646

Wohnort: Schleswig Holstein

Beruf: Freiberuflich

  • Private Nachricht senden

28

Samstag, 21. Januar 2012, 20:13

Re: Problem beim erweitern des formulars mit JavaScript

Dynamisch wäre das Ganze dann so:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
    <title>Titel</title>
    <meta charset="UTF-8" />

    <script>

    function change_type(obj, type, standard)
    {
      if(undefined !== standard)
        if('' == obj.value || standard == obj.value)
          obj.type = type;
        else
          return false;
      else
        obj.type = type;
    }

    function change_value(obj, content, standard)
    {
      if(true == standard)
        if('' == obj.value || content == obj.value)
          obj.value = content;
      if(undefined !== standard)
        if('' != obj.value && standard != obj.value)
          return false;
      obj.value = content;
    }

    </script>

</head>
<body>


    <form action="" method="post">
        <fieldset>
            <legend>Bitte Einloggen</legend>
            <label><input type="text" name="benutzername" value="Benutzername" onclick="change_value(this, '', 'Benutzername');" onblur="change_value(this, 'Benutzername', true);" /></label>
            <label><input type="text" name="passwort" value="Passwort" onclick="change_value(this, '', 'Passwort'); change_type(this, 'password');" onblur="change_value(this, 'Passwort', true); change_type(this, 'text', 'Passwort');" /></label>
            <input type="submit" name="button" value="Einloggen!" />
        </fieldset>
    </form>
</body>
</html>


change_type Verhalten: obj und type sind erforderliche Werte, obj wird wie immer mit this gesetzt, this beinhaltet das aktuelle Element (in unserem Fall jeweils ein input Element). type wird entweder mit text oder password gesetzt. je nachdem welcher Typ gebraucht wird, standard ist ein optionaler Wert, den wir bei onblur mit dem Standard Value des Input Elements füllen (also hier Passwort)

Nun überprüft change_type erst ein mal ob standard gesetzt ist, dann prüft es ob das Passwortfeld leer ist oder mit dem Standard gefültl ist, dann entscheidet es je nach dem ob das Feld zurpckgesetzt wird oder nicht.

change_value Werhalten: obj und content sind erforderliche Werte, obj verhält sich genau wie bei change_type, content wird mit dem gewünschten neuen Value für das Feld gefüllt. Im onfocus Attribut müssen wir standard mti dem Standard Value Wert des Input Elements füllen, damit die Funktion entscheiden kann ob das Value vom Input Feld eine Usereingabe ist, oder eine Systemvorgabe welche nicht ersetzt werden muss.

Das ganze ginge auch schlampig, jedoch deutlich kürzer (je nach dem wie viele Input Felder es werden..):

Quellcode

1
2
3
4
5
6
7
8
<form action="" method="post">
        <fieldset>
            <legend>Bitte Einloggen</legend>
            <label><input type="text" name="benutzername" value="Benutzername" onclick="if(this.value == '') this.value = 'Benutzername';" onblur="if(this.value == '') this.value = 'Benutzername';" /></label>
            <label><input type="text" name="passwort" value="Passwort" onclick="if(this.value == '' || this.value == 'Passwort') { this.value = ''; this.type = 'password'; };" onblur="if(this.value == '' || this.value == 'Passwort') { this.value = 'Passwort'; this.type = 'text'; };" /></label>
            <input type="submit" name="button" value="Einloggen!" />
        </fieldset>
    </form>


Beides ungetestet, beides sollte klappen 8)

29

Samstag, 21. Januar 2012, 20:18

Re: Problem beim erweitern des formulars mit JavaScript

Habe jetzt mal alle mängel versucht zu beheben:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
    <title>Titel</title>
    <meta charset="UTF-8" />
    <link href="style/main.css" type="text/css" rel="stylesheet" />
    <link href="style/login.css" type="text/css" rel="stylesheet" />

    <script>
    document.createElement("header");
    document.createElement("nav");
    document.createElement("section");
    // für alte browser

    function fenster_leeren(uebergabewert)
    {
        if( document.getElementById("benutzername").id == uebergabewert )
        {
            if( document.getElementById("benutzername").value == "Benutzername..." )
            {
                //der value wird geleehrt bei onclick="fenster_leeren(id_des_inputs);"
                document.getElementById("benutzername").value = "";
            }
        }
        if( document.getElementById("passwort").id == uebergabewert )
        {
            if( document.getElementById("passwort").value == "Passwort..." )
            {
                //der value wird geleehrt bei onclick="fenster_leeren(id_des_inputs);"
                document.getElementById("passwort").value = "";
                document.getElementById("passwort").type = "password";
            }

        }
    }

    function fenster_zuruecksetzten()
    {
        if(document.getElementById("benutzername").value == '')
        // wenn nix ausgefüllt wurde und das fenster erlassen wird (wegen onblur="")
        {
            //der value wird wieder gefüllt
            document.getElementById("benutzername").value = "Benutzername...";
        }

        if(document.getElementById("passwort").value == '')
        {
            document.getElementById("passwort").type = "text";
            // bei onblur also verlassen, wird es ein text feld damit
            //der value sichtbar wird der gleich noch gegeben wird
            document.getElementById("passwort").value = "Passwort...";
        }
    }
    </script>

</head>
<body onload="document.getElementById('passwort').type = 'text';">
    <header>huhu</header>


    <form action="" method="post">
        <fieldset>
            <legend>Bitte Einloggen</legend>
            <label><input type="text" id="benutzername" name="benutzername" value="Benutzername..." onclick="fenster_leeren('benutzername');" onblur="fenster_zuruecksetzten();"  /></label>
            <label><input type="password" id="passwort" name="passwort" value="Passwort..."         onclick="fenster_leeren('passwort');"     onblur="fenster_zuruecksetzten();"  /></label>
                                          <!-- id wegen javascript -->
                <input type="submit" name="button" value="Einloggen!" />
        </fieldset>
    </form>
    huhu
</body>
</html>


*EDIT*
Basiii: ich bleibe aber ersteinmal bei meinem code, da er funktioniert und ich ihn erstehe. wenn ich javascript besser verstehe werde ich sicherlich auf deinen umsteigen

Basiii

Wachhund

Beiträge: 1 646

Wohnort: Schleswig Holstein

Beruf: Freiberuflich

  • Private Nachricht senden

30

Samstag, 21. Januar 2012, 20:23

Re: Problem beim erweitern des formulars mit JavaScript

Was gibt es da nicht zu verstehen? Ich habe unten drunter sogar alles erklärt ;)

Eine JavaScript Funktion ist wie eine PHP Funktion, du kannst auch da Parameter übergeben.

31

Samstag, 21. Januar 2012, 20:25

Re: Problem beim erweitern des formulars mit JavaScript

Was hälst du von meinem "code"

Total falsch oder "ok"?

Basiii

Wachhund

Beiträge: 1 646

Wohnort: Schleswig Holstein

Beruf: Freiberuflich

  • Private Nachricht senden

32

Samstag, 21. Januar 2012, 20:34

Re: Problem beim erweitern des formulars mit JavaScript

Was funktioniert ist immer ok, aber wirklich elegant ist es nicht, verglichen mit dem was man mit JavaScript anstellen kann ist es total billig, aber na ja, wie du bereits sagtest: du verstehst es, es funktioniert, also, warum fragst du dann erst? :wink:

33

Samstag, 21. Januar 2012, 20:36

Re: Problem beim erweitern des formulars mit JavaScript

Stimmt da hast du recht.
PS: Was nützt es mir wenn ich nächste woche in deinen code schaue, der auf meinem pc ist und ihn nicht verstehe? da lerne ich erstmal javascript komplett :P

So hat noch jemand was passendes für den thread zu bieten? :)