Slider to JS variable

[Rolf B]

Hallo Felix,

neue JS Features wie Pfeilfunktionen sollten wir außen vor lassen, es ist für Alois schon genug an neuem Wissen, denke ich.

Ist es nicht einfacher, die Slider - und was sonst zum Versand ansteht - in ein Form zu stecken und aus dem Form ein FormData zu initialisieren? Form und PHP sollten so gebaut sein, dass ein POST des Forms ebenfalls funktioniert, als Fallback falls das JS nicht ausgeführt wird. Mit JS verwendet man einen submit Listener.

Gerade entdeckt: Ein FormData Objekt kann verwendet werden, um ein URLSearchParams-Objekt zu initialisieren. Auf dem ruft man toString() auf und verwendet es als Body für den POST Request.

<form name="temperaturen" method="POST" action="setTemp.php">
<label for...>...</label><input type="range" name="temp1" min... max...>
<label for...>...</label><input type="range" name="temp2" min... max...>
<label for...>...</label><input type="range" name="temp3" min... max...>
<button name="save" value="form">Senden</button>
</form>

Die Labels sind nur angedeutet und müssen natürlich ausformuliert werden.

document.forms.temperaturen.addEventListener("submit", function(submitEvent) {
   const params = new URLSearchParams(new FormData(submitEvent.target));
   params.set("save", "ajax");

   // hier Ajax-Code, versende damit params.toString() an setTemp.php
   // zum Beispiel:
   fetch("setTemp.php", { 
      method: "POST", 
      body: params.toString(), 
      headers: { "Content-Type", "application/x-www-form-urlencoded" });

   // Submit durch den Browser verhindern
   submitEvent.preventDefault();
});   

submitEvent.target ist das Form-Element, daraus wird ein FormData und daraus ein URLSearchParams Objekt. Der save-Button ist darin nicht enthalten, das passiert nur beim Browser-Versand. Deshalb wird der save-Eintrag gefaked, mit einem vom Form abweichenden Value, so dass man ggf. am Server zwischen einem POST durch den Browser und einen POST durch den EventListener unterscheiden kann.

Dann folgt Standard-AJAX-Code, XMLHttpRequest oder fetch, zum Hochschicken. Darin muss man den Content-Type Header auf application/x-www-form-urlencoded setzen.

Statt den Header zu setzen kann man auch auf die Einkapselung in URLSearchParams verzichten und direkt das FormData Objekt schicken, das geschieht dann aber automatisch als multipart/form-data. Das ist PHP egal, sind aber mehr Bytes auf der Leitung.

Fertig. Ein Merken der Sliderwerte im change-Handler ist in keinem Fall nötig.

Rolf