select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post

[Rolf B]

Hallo Jens Arnols,

das Problem der verlorengehenden Eventlistener hast Du nicht. Zum einen verwendest Du keine Eventlistener, die über addEventListener registriert werden, zum anderen verarbeitest Du für dein Daten2-Select keine Events.

Ich vermute das das Problem irgendwie durch das ersetzen des select per Ajax das neue selectfeld nicht vom Formular erkannt wird.

Ich auch. Was Du uns bisher nicht gezeigt hast, ist, wie das HTML-Fragment aussieht, das Du vom Server bekommst und in das FeldAJAX-div einsetzt. Deswegen diese Frage:

Durch die Zuweisung an innerHTML entfernst Du das alte <select>-Element und erzeugst ein neues. Besitzt dieses neue <select>-Element ein name-Attribut? Dann und nur dann wird es beim nächsten Submit übermittelt.

Dein JavaScript-Code ist sehr umständlich.

1. Selbst der Internet Explorer kennt seit Version 10 den XMLHttpRequest (und der IE ist mittlerweile tot und ausgemustert). Daher ist der ActiveX-Fallback hyperfluid.
2. Der dritte Parameter von open besagt, ob XMLHttpRequest asynchron arbeiten soll. true heißt: Ja, soll er. Und das ist der Default, das kannst Du also weglassen
3. Die globalen Variablen http und Where brauchst Du, weil Du AJAX_Output als separate Funktion notiert hast. Das geht besser - man kann Funktionen schachteln, wodurch die innere Funktion Zugriff auf alle Variablen der äußeren Funktion hat. Das gilt selbst dann, wenn die innere Funktion als Eventhandler verwendet wird und ihr Aufruf erst erfolgt, wenn die äußere Funktion eigentlich längst beendet wurde. Der Aufrufkontext bleibt aber erhalten. Stichwort zum Nachlesen: Closure.

function AJAX(WhereToPrint,Value,Daten)  
{
  let http = new XMLHttpRequest();  
  http.open("GET", "AJAX?VALUE=" + Value + "&Daten=" + Daten);  
  http.onreadystatechange = AJAX_Output;  
  http.send(null);  

  function AJAX_Output() {  
    if (http.readyState == 4) {  
      document.getElementById(WhereToPrint).innerHTML = http.responseText;  
    }  
  }  
}  

Das kann man noch weiter treiben und einen Funktionsausdruck verwenden. Der erzeugt eine anonyme Funktion, die man wie ein ganz normales Objekt herumreichen kann. Achte auf das Semikolon hinter dem }, das ist jetzt wichtig.

function AJAX(WhereToPrint,Value,Daten)  
{
  let http = new XMLHttpRequest();  
  http.open("GET", "AJAX?VALUE=" + Value + "&Daten=" + Daten);  
  http.onreadystatechange = function() {
    if (http.readyState == 4) {  
      document.getElementById(WhereToPrint).innerHTML = http.responseText;  
    }  
  };
  http.send(null);  
}  

Die modernere Variante wäre das fetch-API. Der Internet Explorer kann das nicht - aber wie gesagt, der ist tot. Mit fetch wird AJAX ein Dreizeiler.

function AJAX(WhereToPrint,Value,Daten)  
{
  fetch("AJAX?VALUE=" + Value + "&Daten=" + Daten)
  .then(response => response.text())
  .then(html => document.getElementById(WhereToPrint).innerHTML = html);
}  

Problem bei fetch ist, dass es auf Promises basiert und man die erstmal kapieren muss, bevor man fetch wirklich kapiert.

Unser Wiki ist bezüglich fetch leider noch sehr schwach bestückt, ich habe es noch nicht geschafft, meine Baustelle dort fertigzustellen. Wenn Du englisch kannst, probier's bei Mozilla.

Rolf