Ajax, httpRequest e eventi onchange

[Niknex]

Buongiorno!

Sto creando un form che pressapoco ha la funzione di fissare degli appuntamenti per degli operatori.
Il form, in particolare, ha un input data (data appuntamento) e una select (elenco operatori).

Al caricamento della pagina la select viene popolata con i nominativi di tutti gli operatori disponibili nella settimana, ordinati per giorni.
Alla selezione di una data (onchange), tramite JS mando un HTTPRequest ad una pagina php che, interrogato il DB, sostituisce la select caricata inizialmente con una sua gemella contenente solo i nominativi degli operatori attivi in quel preciso giorno.

Alla select è associato un altro evento, sempre onchange, che, una volta selezionato un operatore, mostra in un div esterno gli orari degli appuntamenti già presenti per quell'operatore.

Ora, finchè nella mia pagina non viene selezionata una data (evento onchange sulla data) l'evento onchange sulla select funziona correttamente. Ma dal momento in cui la select viene modificata tramite il primo evento JS (riferito alla data) la funzione su di essa termina si funzionare.
Per semplificare la vita a chi leggerà questo messaggio ho semplificato e striminzito il codice, mantenendo ovviamente le parti importanti e che generano problemi.

Vi riporto il codice sorgente:
FORM

<div id="info"></div>
<form>
<div id="input-form">
  <input type="date" name="data" id="dataApp" onChange="checkDate()" required>
</div>
<div id="divSquadre">
  <select name="squadra" onChange="orariApp()" id="squadra" required>
  <option value="0">Operator 1</option>
  <option value="1">Operator 2</option>
  <option value="2">Operator 3</option>
  </select>
</div>
</form>

function checkDate() {
      var data=document.getElementById("dataApp").value;

      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("divSquadre").innerHTML = this.responseText;
        }
      };
      xmlhttp.open("GET", "./ajax/checkSquadreInDataApp.php?data=" + data , true);
      xmlhttp.send();
    }

function orariApp() {

  //if run function checkDate() this function doesn't work
  alert("i'm working :)");
 }

$data=$_REQUEST["data"];
//CODICE OSCURATO DI INTERROGAZIONE DB
echo '<select name="squadra" onChange="orariApp()" id="squadra" required>';
foreach($squadra as $el){
  echo '<option value="'.$el['id'].'">'.$el['id'].'</option>';
} echo '</select>'; 

[ciro78]

il problema nasce dal fatto che quando cambi la data, e ricarichi la select, difatti stai cancellando anche l'evento ad esso associato.

All' avvio della pagina viene associato l'evento change alla select degli operatori
Cambiando data, cancelli la select e la inserisci in pagina. In questo caso l'evento non viene riassociato.

Per evitare questo problema puoi usare jQuery oppure modificare solo il contenuto della option della select piuttosto che riscriverla.