Fensterposition nach form submit merken

[Rolf B]

Hallo PHP-Neuling,

du bist nicht zum ersten Mal bei uns, aber ich habe kein Notizbuch über die Kenntnisstände aller Forenbenutzer… Ich bin ja kein Lehrer 😉. Und es ist ja auch denkbar, dass jemand, der sich vor einem halben Jahr als Anfänger zeigte, mittlerweile eine Menge dazugelernt hat.

javascript Kenntnisse ... mäßig

Mäßig bedeutet: einfache Sachen bekommst Du eigenständig hin und du hast ein Grundverständnis der Sprache. Du kennst aber nur einen Basis-Satz von Programmierschnittstellen und weißt nicht, was es alles gibt.

Mäßig bedeutet nicht: Du kannst ausschließlich fertige Code-Snippets zusammenkopieren und kapierst nicht, was sie tun. Eventuell kannst Du leichte Anpasungen vornehmen, z.B. IDs oder Klassennamen. Diesen Kenntnisstand würde ich mit "gering" klassifizieren.

Das lässt sich noch mit "ahnungslos" unterbieten, in dem Fall müsste man Dir auch sagen, wohin Du Codesnippets kopieren musst und was Du anpassen musst.

Deute ich dein "mäßig" richtig? Oder ist es ein Euphemismus für "gering"?

jedes Selectfeld hat ein eigenes Submit drin, sodass das Formular direkt abgeschickt wird,

Das geht nicht ohne JavaScript, d.h. du hast bereits einen change- oder input-Handler für die select-Felder registriert, der den Submit auslöst. Hoffentlich einen, der mit Bubbling arbeitet und an einer zentralen Stelle hängt, und nicht einen eigenen für jedes select.

Diesen Eventhandler kannst Du nutzen, um vor dem Submit die action des Forms zu manipulieren. Gib jedem Monatscontainer eine passende ID, z.B. "monat_202101" für den Januar, und füge der Form-Action vor dem Submit eine Hash-Komponente wie #monat_202101 hinzu. Der Browser wird den Monat, für den submittet wurde, dann automatisch nach oben positionieren. An Stelle einer Manipulation des action Attributs im Form hätte ich Dir ja lieber vorgeschlagen, jedem select Element ein formaction-Attribut zu geben, aber das gibt's da nicht.

Ein Schritt aufwärts: AJAX

Besser - sofern es Dich nicht überfordert - wäre eine Lösung mit AJAX, d.h. du machst keinen Form-Submit, sondern postest auf ein API Script, das nur die Änderung speichert. Für den User passiert gar nichts, das erfolgt rein im Hintergrund. Den Ajax-Aufruf kannst Du mit XMLHttpRequest, jQuery oder - am besten - mit fetch implementieren. Unser fetch-Artikel im Selfwiki ist leider immer noch nur ein Stub, ich muss Dich deshalb für eine Lektüre zu Mozilla schicken. Eine deutsche Einführung habe ich auch hier gesehen.

Serverseitig wird ein POST durch fetch wie POST durch ein Form verarbeitet, wenn Du die Daten als FormData sendest:

let formdata = new FormData(document.forms.kalender);
fetch('/calendarchange.php', {
  method: 'POST',
  body: formdata
});

Wenn Du auch Antworten vom Server brauchst - und sei es eine Fehlermeldung oder Updates anderer Kalenderzellen, wäre ein JSON-String sinnvoll, den Du in JS mit JSON.parse in ein Objekt umwandeln kannst. Das ist dann aber schon etliches mehr an JavaScript, du musst die Server-Antwort dann auch entgegennehmen und dann sind wir bereits bei Promises. Das wird in den Links oben gezeigt, aber man muss dann schon verstehen, was passiert.

Was man auch findet, sind Serverkomponenten, die ein fertiges HTML Snippet liefern. In deinem Fall könnte das ein fertiger HTML Block für den Monat oder den Tag sein, und du überschreibst einfach das innerHTML Attribut.

Rolf