Rolf B: Fensterposition nach form submit merken

Beitrag lesen

SELF-Forum

Fensterposition nach form submit merken

Rolf B
– Informationen zu den Bewertungsregeln

Hallo PHP-Neuling,

du machst Dir die Form-Ermittlung unnötig kompliziert. Wenn der Browser den Code in onchange ausführt, setzt er this auf das Element, an dem onchange notiert ist, also das Select-Element. Dieses hat eine form-Eigenschaft, die auf dessen Form verweist. Das Form braucht dann eigentlich gar keinen Namen mehr (es sei denn, den verwendest Du anderswo noch). Dem Select-Element würde ich bei dieser Konstruktion einen Namen geben, der immer gleich ist. Welches Datum geändert wird, steuerst Du über die Action-URL des Forms:

<form action="kalender.php?datum=20211004">
   <select name="auswahl" onchange="this.form.submit()">
      <option value="...">...</option>
      <option value="...">...</option>
      <option value="...">...</option>
   </select>
</form>

Dann findest Du in $_GET["datum"] das Datum und in $_POST["auswahl"] den ausgewählten Wert. Bzw. Du verwendest $_REQUEST["datum"] und $_REQUEST["auswahl"], wenn Du Dir keinen Kopf drum machen willst, ob es ein GET- oder POST-Parameter ist.

Und was ist bubbling? Tja, hier eine ausführliche und im wahresten Sinne des Wortes erschöpfende Lektüre im Selfwiki.

Ob Dir bubbling viel nützt, darüber kann man geteilter Meinung sein. Das eine onchange-Attribut, das außer this.form.submit() nichts tut, macht den Kohl auf der Seite nicht viel fetter.

Angenommen, du hast folgendes auf der Seite, natürlich mit noch viel mehr forms:

<body>
  <section id="kalender">
    <div id="monat_2021_10">
      <form action="termine.php?datum=20211004">
        <select name="auswahl" onchange="this.form.submit()">
        </select>
      </form>
      <form action="termine.php?datum=20211005">
        <select name="auswahl" onchange="this.form.submit()">
        </select>
      </form>
    </div>
  </section>
</body>

Dann könnte man den Change-Handler von den select-Elementen entfernen und auf das section-Element legen:

<body>
  <section id="kalender">
    <div id="monat_2021_10">
      <form action="termine.php?datum=20211004">
        <select name="auswahl" >
        </select>
      </form>
      <form action="termine.php?datum=20211005">
        <select name="auswahl">
        </select>
      </form>
    </div>
  </section>
  <script>
  document.getElementById("kalender").addEventListener("change",
    function(event) { 
      let selectElement = event.target;
      if (selectElement.tagName != "SELECT") return;  // falsches Element
      selectElement.form.submit();
    });
  </script>
</body>

Das Script muss so, wie es gebaut ist, hinter dem Kalender-Container stehen, sonst findet es ihn nicht. Ob das bei Dir eine section mit id="kalender" ist, weiß ich natürlich nicht - du musst bei Dir das Container-Element identifizieren, das alle Kalendertage enthält, und dessen ID bei getElementById angeben.

Auf diesem Element wird nun mit addEventListener ein change-Eventhandler registriert. Das ist so ähnlich wie onchange, aber im Script statt im HTML, und man kann - falls man will - auch mehr als einen Handler für ein Event registrieren.

Die Funktion, die auf das Event reagieren soll, bekommt das event-Objekt übergeben. Darin finden sich Informationen zum verarbeiteten Event, die Event-Schnittstelle (also die Eigenschaften und Methoden dieses Objekts) ist hier näher beschrieben.

Es gibt jetzt nur noch eine Eventhandler-Registrierung, statt eine pro select. Der Eventhandler bekommt nun die change-Events aller Elemente im Kalender-Container mit, deswegen fragt die Funktion als erstes ab, ob es auch ein select-Element war (über den tagName). Wenn nicht, springt sie gleich wieder zurück. Und wenn doch, schickt sie dem zugehörigen Form ein submit. Fertig 😀

Rolf

--
sumpsi - posui - obstruxi
Beitrag melden
–
Informationen zu den Bewertungsregeln