Event bei Veränderung eines unsichtbaren Feldes

[arkadiuszpaluszek]

Hallo!

Ich habe ein Formularfeld. Wenn hier etwas eingetragen wird, verändert sich auch etwas in einem "hidden" Feld. Nach dieser Änderung sollte ein JS-Script loslegen.

Mein Problem ist, dass die Events "oninput" oder "onchange" voraussetzen, dass du mit dem Cursor in dem betreffenden Feld bist und dieses Feld dann verläßt - was bei einem versteckten Feld ja nicht der Fall ist. Hat jemand eine Idee, ob es möglich ist, ein Event so zu definieren, dass es bei der Veränderung des Werts in einem unsichtbaren Feld ein Script startet?...

 

[Tronjer]

Was ist mit dem Event, welches einen Wert in das hidden input einträgt?

 

[arkadiuszpaluszek]

O.k. Es ist so - ich habe eine PHP-Funktion welche ein Inputfeld mit einer dazugehörigen Liste von Argumenten erstellt - die Argumente kommen aus der Datenbank - z.B. Namen von Mitarbeitern oder Kunden. Es ist im Prinzip ein Kombinationsfeld - Inputfeld mit einer Drop-Down Auswahlliste.

Sobald im ersten Inputfeld ein gültiger Name eingetragen wurde und der User das Feld verläßt, wird mit dem Event "onblur" die zum Namen gehörende ID (Int) ermittelt und in das versteckte Feld eingetragen.

Es ist also eine Funktion mit einer ganzen Latte an dazugehörigen Argumenten:

combobox_filtered ($tabelle,$spalte,$id_selected,$spalte_filter,$filterkriterium, $feldname, $listenname, $feldgroesse=30, $url_basiclevel="", $function_to_run_on_change="")

Das letzte Argument soll eine flexible Funktion sein. D.h. dass je nach dem, wo die Funktion eingesetzt wird, evtl. ganz unterschiedliche Funktionen aufgerufen werden sollten, deshalb das letzte Argument $function_to_run_on_change - hier soll an die Funktion als String z.B. der Name einer JS-Funktion übergeben werden, welche dann eingebaut wird, wie z.B.

$function_to_run_on_change = "meine_JS_Funktion()";

Ich habe sehr wohl versucht es an das erste Event zu koppeln, dann aber bekommen ich die Zahl zurück welche im "hidden" - Feld steht bevor die neue ID eingetragen wird, oder sie wird es gar nicht eingetragen.

Es sei denn, die aufgerufene JS-Funktion würde am Ende noch die "flexible" Funktion aufrufen - aber wie übergebe ich an JavaScript einen Funktionsnamen als String, damit JS dann die Funktion startet, bzw. wie starte ich in JS eine Funktion, deren Namen ich als String habe?....

 

[Tronjer]

Was sind denn die Conditions für deine 'dynamische' Funktion und würde es nicht reichen, diese Funktion on submit() aufzurufen? Dann sollten doch alle Parameter bekannt sein.

 

[arkadiuszpaluszek]

Nein, das geht nicht! Da die dadurch aufgerufene Funktion im Formular Werte setzen muss, bevor dieses abgeschickt wird - z.B. wähle ich einen Kunden aus und in einem anderen Feld wird automatisch der für den Kunden zuständige und zur Leistung passende Kostenträger ausgewählt - also die Krankenkasse / Pflegekasse des Kunden, der Sozialhilfeträger, das Jugendamt, das Jobcenter oder wie auch immer.

Im Moment habe ich folgende Lösung gefunden - ich übermittele nicht den Namen der Funktion, sondern eine Variable mit dem Namen "Aktion" und je nach Wert dieser Variablen wird dann in der JS-Funktion welche immer aufgerufen wird dann durch if () {...} oder switch () {...} zur entsprechenden Funktion weitergeleitet.

Ggf. könnte der in der Variablen "Aktion" enthaltene String nach festgelegten Trennzeichen wie Kommata oder was auch immer zerlegt werden, um die auszuführende Funktion und die zur Funktion dazugehörigen Parameter zu bekommen.

Das wird funktionieren. Wenn jemand aber eine einfachere Lösung hat, bin ich für jeden Denkanstoß dankbar!

 

[arkadiuszpaluszek]

So, jetzt ärgert mich JS aber!!!!

Also - wenn mein Inputfeld mit der vorgegebenen Liste einen Wert bekommt, startet folgende JS-Funktion:

function f_dropdown_id_eintragen(inputfeld, hiddenfeld, tabelle, spalte, url_basiclevel, function_to_run) {
    inhalt = document.getElementById(inputfeld).value;
    mein_link = url_basiclevel+"abrechnung/AJAX_REQUESTS.php?aktion=dropdown&inhalt="+inhalt+"&hiddenfeld="+hiddenfeld+"&tabelle="+tabelle+"&spalte="+spalte+"&function_to_run="+function_to_run;
    resOb = erzXHRObjekt();
    resOb.open('get', mein_link, false)
    resOb.onreadystatechange = f_dropdown_id_eintragen_AJAX;
    resOb.send(null);
}

Php-Seitig läuft es so:

if ($aktion == "dropdown") {
    $id = gesuchtes_feld($inhalt, $tabelle, $spalte, "ID");
    echo "$id;$hiddenfeld;$function_to_run";
}

Und schliesslich geht alles hierher:

function f_dropdown_id_eintragen_AJAX() {
    if (resOb.readyState == 4) {   
        myText = resOb.responseText;
        myArray = myText.split(";");
        id = myArray[0];
        hiddenfeld = myArray[1];
        function_to_run = myArray[2];
        document.getElementById(hiddenfeld).value = id;
   
        // Jetzt muss geprueft werden, ob der Eintrag im Feld einem Element aus der Liste entspricht
        if (id < 1) {
            document.getElementById("auswahl_"+hiddenfeld).style.backgroundColor="tomato";
            alert("Der Eintrag entspricht keinem Element aus der Liste");
        }
        else {
            alert("die ID ist "+id);
            document.getElementById("auswahl_"+hiddenfeld).style.backgroundColor="honeydew";
            // Wenn der Eintrag gültig ist, werden evtl. verschiedene Funktionen gestartet:
            switch(function_to_run) {
            case "beep":
                beep(id);
            break;
            }           
        }
    }
}

Die Testfunktion Beep:

function beep(id) {
    alert('BEEP - ID des Kunden ist ')+id;
}

Mein Problem - in der function f_dropdown_id_eintragen_AJAX() wird durch die den Alert-Befehl ein korrekter Wert ausgegeben, der auch immer mindestens 1 ist oder größer (was ja logisch ist, da im Falle dass id kleiner als eins ist, die erste Bedingung erfüllt ist und die Fehlermeldung "Der Eintrag entspricht keinem Element aus der Liste" ausgegeben wird.

ALSO - id ist größer als 0! Nun wird die variable id an die Funktion beep übergeben und sollte dort durch das alert ausgegeben werden. WIRD ABER NICHT! Es ist nicht mal 0, es ist einfach "" ! Gar nix. Hat jnd. eine Idee warum?...

 

[arkadiuszpaluszek]

GELÖST - habe auch das gefunden! Das +id in der Funktion Beep muss natürlich innerhalb der Klammer stehen, schon klar...

 

[B3nnoX]

Ich hätte aber noch nen Vorschlag, und zwar könntest du anstelle des Strings in PHP json zurück geben, das ist dafür gemacht ;)

echo json_encode(array('id' => $id, 'hiddenfeld'=>$hiddenfeld, 'function_to_run' => $function_to_run));

Im JS Teil dann so

myText = JSON.parse(resOb.responseText)

und wenn ich nun nicht komplett auf dem Kopf gefallen bin, müsstest du denn so an deine Werte kommen

myText.id
myText.hiddenfeld
myText.function_to_run

 

[Tronjer]

Auch wenn das Problem jetzt gelöst sein mag, räume mal das AJAX auf. Die Funktion f_dropdown_id_eintragen() überprüft readyState, aber nicht den Status. jQuery stellt ein einfaches Pattern zur Verfügung.

$.ajax({....})
  .done(function(success) {
    console.debug(success);
  })
  .error(function(error) {
    console.debug(error);
  });