Problem beim erweitern des formulars mit JavaScript

Yamram · 21. Januar 2012

Naja, wenigstens funktioniert es jetzt tadellos

Sören · 21. Januar 2012

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 · 21. Januar 2012

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!

unkown-6363 · 21. Januar 2012

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:

Code

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

richtiger gedankengang?

Yamram · 21. Januar 2012

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

Code

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

Dann packst du einfach die ID des Elements darein

Code

onclick="Clear(passwort);"

und fertig...

unkown-6363 · 21. Januar 2012

Zitat von "Yamram"

onclick="Clear(passwort);"

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

Sören · 21. Januar 2012

Aber bitte

Code

onclick="Clear('passwort');"

(mit Anführungszeichen)

In der Funktion dann einfach

Code

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

Basi · 21. Januar 2012

Dynamisch wäre das Ganze dann so:

HTML

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

Alles anzeigen

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

Code

<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

unkown-6363 · 21. Januar 2012

Habe jetzt mal alle mängel versucht zu beheben:

HTML

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

Alles anzeigen

*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

Basi · 21. Januar 2012

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.

unkown-6363 · 21. Januar 2012

Was hälst du von meinem "code"

Total falsch oder "ok"?

Basi · 21. Januar 2012

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:

unkown-6363 · 21. Januar 2012

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

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

Problem beim erweitern des formulars mit JavaScript

Jetzt mitmachen!

Teilen