• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Hintergrund-Animation soll bei form-action gleich bleiben

Aaron3219

Senior HTML'ler
Hallo liebes Forum,

ich betreibe momentan sehr viel Aufwand für einen Inside-Joke und der Aufwand soll noch größer werden.
https://www.xn--frachtagentur-krger-lbc.de/test/login.php
hier erstmal die Seite.

Wie man sehen kann, ist eine Javascript Background-Animation zu erkennen.
Wenn ich nun meine Anmeldedaten eingebe und den Login-Button betätige, würde ich jetzt durch die action="" Erweiterung im Form ein PHP-Skript laden, welches die Daten aus einer MySQL-Datenbank abruft.

Hier liegt das Problem. Wenn ich auf Login klicke, wird natürlich eine neue Seite geladen, und die Background-Animation wird ebenfalls neu geladen. Das soll aber nicht sein. Ich habe schon mal ein bisschen nachgeschaut, ob wann mit Javascript auch ohne neuladen ein PHP-Skript ausführen könnte, aber das ist alles nicht in meinem Sinne.
 
Werbung:
Wenn ich auf Login klicke, wird natürlich eine neue Seite geladen, und die Background-Animation wird ebenfalls neu geladen. Das soll aber nicht sein.

Aus eben diesem Grunde werden moderne Seiten als SinglePage erstellt, deren Inhalte per Ajax in die index.html nachgeladen werden. Ein kompletter Reload findet nicht mehr statt, und PHP findet höchstens noch im Backend Verwendung.

Dafür gibt es Frameworks wie Angular, React, Vue, etc.
 
Meine Lösung:
HTML:
<form method="post">
        <input id="name" name="name" type="text" placeholder="Name" required="" autocomplete="off" /><br>
        <input id="passwort" name="passwort" type="password" placeholder="Password" required="" autocomplete="off" /><br>
        <input type="submit" value="Login" onclick="return Funktionsname()" style='width: 200px;'>
</form>
HTML:
function Funktionsname()
{
    var name = document.getElementById('input-id1').value;
    var passwort = document.getElementById('input-id2').value;
    var dataString = 'name=' + name + '&passwort=' + passwort;
    $.ajax({
        type: "post",
        url: "pfad/zu/file.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $('#msg').html(html);
        }
    });
    return false;
}

Gibt es da was zu bemängeln, oder ist das so in Ordnung?
 
Werbung:
Ja ich hab nochmal nachgeschaut und habe in der comment-section einer Seite herausgefunden, dass das Tutorial einen Fehler gemacht hat. Ich habe ihn verbessert und es funktionierte.
 
Zurück
Oben