[GELÖST] jQuery soll Sprache umstellen

[holzjunge]

Hi Leute,

ich habe eine Frage:

Ich habe von der Hochschule die Aufgabe diese Form zu erstellen:
Pic-Upload.de - form.jpg

Dies habe ich soweit auch vom CSS/HTML Teil geschafft.
Allerdings soll sich die Sprache ändern wenn ich auf die Fahne klicke.
Das ist bisher mein Ansatz:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
        $(document).ready(function()
        {   
            var lang = "ENG";
            
            $("#flag").on({click: function()
            {
                if($("body").attr("lang") === "DE")
                {
                    document.getElementById("text1").innerHTML = "Bitte füllen Sie die Form aus.";
                    document.getElementById("ueb1").innerHTML = "Login Informationen";
                    document.getElementById("user").innerHTML = "Benutzername";
                    document.getElementById("pw").innerHTML = "Passwort*";
                    document.getElementById("pwRe").innerHTML = "Passwort wiederholen*";
                    
                    document.getElementById("ueb2").innerHTML = "Benutzer Information";
                    document.getElementById("fName").innerHTML = "Vorname";
                    document.getElementById("mName").innerHTML = "Zuname";
                    document.getElementById("lName").innerHTML = "Nachname";
                    
                    document.getElementById("sub").innerHTML = "Absenden";
                }
                else
                {
                    
                }
            }
            });
        });
        </script>

Das ist nur mein jQuery / JS ausschnitt.
Das Bild ist ein img mit der id="flag".

Ich weiss das ihr hier nicht da seit um meine Hausaufgaben zu machen.
Allerdings bin ich neu im Umgang mit JQuery und JavaScript.
Würde mich sehr freuen wenn ihr mir meine Fehler zeigt bzw. erklärt was ich machen muss.

Mfg.

 

[mikdoe]

mit dem anhang stimmt etwas nicht. brauchst du dabei hilfe?

 

[holzjunge]

Was stimmt damit nicht? Bei mir zeigt er das Bild an.

 

[fadattf]

Was stimmt damit nicht? Bei mir zeigt er das Bild an.

Alle anderen sehen das Bild aber nicht
Ohne das Bild zu sehen wirkt der Code aber schon etwas seltsam...
Reguläres Javascript mit jQuery gemixt.

 

[holzjunge]

Habe den Bild link geändert. Geht normales JS nicht in verbindung mit jquery?

 

[fadattf]

Natürlich kann man es mischen.
Aber statt

 document.getElementById("ueb2").innerHTML = "Benutzer Information";

wäre es in jQuery

 $("#ueb2").html("Benutzer Information");

Ansonsten frage ich mich wozu du noch das Attribute "lang" im Body abfragst.

Ich würde den Code wie folgt schreiben.

 <script>
        $(document).ready(function()
        {   
            var lang = "ENG";  // wenn Formular ursprünglich Englisch ist, ansonsten "DE"
            
            $("#flag").click(function() {
            
                if ( lang == "ENG" ) {
                   $("#ueb2").html("Benutzer Information");
                   lang = "DE";
                }else{
                   $("#ueb2").html("User Information");
                   lang = "ENG";
                }
             });

        });
        </script>

 

[holzjunge]

Oki ich habe es jetzt hinbekommen das er die Sprache ändert und das Bild ändert wenn ich darauf klicke, nur wie mache ich es nun das er es wieder zum anfangszustand setzt wenn ich erneut darauf klicke?

 

[fadattf]

Damit sich das Bild ändert?
Dem Bild auch eine ID geben und mittels jQuery die SRC im jeweiligen if/else Zweig ändern.

 

[holzjunge]

Ok habe es hinbekommen...dann war ich doch nicht so falsch allerdings ändert er die label nicht. Gibt es da einen bestimmten Befehl oder der gleichen?

- - - Aktualisiert - - -

Ok habe es selbst raus bekommen. $("label[for='user']").text("Benutzername");.....trotzdem Danke

 

[fadattf]

Welche Labels?
Ein Codeauszug wäre hilfreich.

 

[holzjunge]

<label for="user">User name* <input id="user" ></label>......ist ein Label mit Input.....hier der jQuery befehl: $("label[for='user']").text("Benutzername* ");
Allerdings verschwinden die Inputfelder nun?

 

[fadattf]

So ganz will es mir nicht einleuchten warum du die Labels ändern willst. Es ging doch nur um die Sprache. Die Labels können hierfür unangetastet bleiben und funktionieren weiterhin.

 

[holzjunge]

Ja es geht um die Sprache und desswegen sollen die Labels der Inputfelder geändert / übersetzt werden.

 

[fadattf]

Ach jetzt hab ich es verstanden. Hatte in Kopf irgendwie einen anderen HTML code.

Wenn du so mit jquery das label änderst, dann änderst du alles im label Tag und löscht somit die input Felder.

Kannst du den HTML code nicht wie folgt umbauen.

<label for="username" ID="lblUsername">username</label><input ID="username" Name="frmUsername" />

Oder die Texte noch mit "spans" umwickeln, dann kannst du auch nur die Texte ansprechen und die Input Felder bleiben.

 

[holzjunge]

Hm hat leider auch nicht funktioniert. Jemand eine Idee warum die Inputfelder dann verschwinden? Ich ändere doch nur den Text des Labels.

 

[mikdoe]

Das erscheint mir alles extrem umständlich. Gibt es da nicht ein Serverbackend wo man mit entsprechenden Sprachentemplates arbeiten kann?

Zum aktuellen Fehler: zeig bitte mal den aktuellen Code der den Fehler verursacht.

 

[fadattf]

Das kabel hat keinen Text du änderst alles was zwischen den label tags steht.
Ich schreib dir in einer Stunde den code mit eingefügten spans. Dann bleibt es bei den paar Zeilen jQuery.

 

[fadattf]

So hier der Code - ist nicht getestet aber sollte so in die Richtung klappen.

 <script>
        $(document).ready(function()
        {   
            var lang = "ENG";  // wenn Formular ursprünglich Englisch ist, ansonsten "DE"
            
            $("#flag").click(function() {
            
                if ( lang == "ENG" ) {
                   $("#ueb2").html("Benutzer Information");
                   $("#lblUsername").html("Benutzername");
                   $("#flag").attr("src", "de.gif");
                   lang = "DE";
                }else{
                   $("#ueb2").html("User Information");
                   $("#lblUsername").html("Username");
                   $("#flag").attr("src", "eng.gif");
                   lang = "ENG";
                }
             });

        });
        </script>

<img src="de.gif" id="flag" />

<h2 id="ueb2">Benutzer Information</h2>
<label for="username"><span id="lblUsername">Benutzername</span><input type="text" id="username" /></label>
<!-- alle weiteren Felder im gleichen Schema aufbauen -->

Eine (von vielen) Alternative wäre natürlich auch das Formular 2x in HTML zu bauen und mit JS immer nur eines einzublenden.

 

[holzjunge]

@fadattf
Danke hat hervorragend funktioniert.
Danke