dynamisch erstellten Input Feldern und Event-Handlern

[tommylee]

Hi @ll

Lange überschrift doch ist mein Problem recht simpel erklärt.

Mein Problem ist folgend:

Ich habe ein Formular erstellt das eine gewisse Anzahl an Zeilen (table) hat. In jeder Zelle dieser Zeilen befinden sich <input type="text"> Felder.
Da es unter vorkommen kann, dass die angeführten Zeilen zu wenig sind, habe ich ein script (pluss button) eingebaut, das mir weitere Zeilen einfügt, ganz im Layout der restlichen Zeilen.
Das Funktioniert soweit prima. Nun kommt mein Problem.
Die Werte (Zahlen) die in selbige input Felder eingegeben werden sollen von einem anderen Feld abgezogen werden (was auch funktioniert). Allerdings geht das nur, bei den fix "montierten" input feldern. Die dynamisch nachträglich erzeugten Inputfelder (die auch den selben eventhandler haben) reagieren nicht auf das Event "onChange".

Kleines Beispiel (sinngemäß):

-----------------------------------------------------------
[Quote]
function hallo (i){
alert("Na Hallo, du bist der " + i + "te!");
}

<!-- fixen Zeilen:
<input type="text" value="" onChange="hallo(1)">

<!-- mittles Javascript dynamisch erstelltes Feld:
<input type="text" value="" onChange="hallo(2)">[/Quote]
-----------------------------------------------------------

wie gesagt der Bereich "<!-- fixen Zeilen:" funktioniert, die "<!-- mittles Javascript dynamisch erstelltes Feld:" tut nichts.
Selbst wenn ich die Funktion direkt in den Event-Handler eintrage (javascript:alert(hello); passiert gar nichts....

Was mach ich falsch? Kann mir jemand helfen?

[Ike]

Servus,

Ich würde sagen, es ist grundsätzlich mal ein Internet-Explorer-Bug (oder Feature?). Hast du's schon mal im Firefox getestet? Da sollte es gehen, denke ich...

Ok aber das hilft dir ja mal soweit nichts, wenn's im IE auch gehen soll...

Ich würde an deiner Stelle dann so vorgehen:

1. Die Funktion, die das neue Feld erstellt:

function addField() {
<!-- neues Feld erzeugen, so oder ähnlich... -->
document.getElementById("hierSindMeineInputs").innerHTML += "<input type="text" value="" id="meineEindeutigeId" />";

<!-- dem neuen Feld das onChange-Event via DOM definieren -->
document.getElementById("meineEindeutigeId").onchange = function() {
hallo(2);
}
}

Alternativ könntest du auch das neue Feld nicht mittels innerHTML erstellen, sondern tatsächlich komplett über das DOM-Objekt die entsprechenden neuen Nodes mit den entsprechenden Attributen erstellen. Dann gehts garantiert, ist aber aufwändiger.

Gruß

Ike

Hi @ll

Lange überschrift doch ist mein Problem recht simpel erklärt.

Mein Problem ist folgend:

Ich habe ein Formular erstellt das eine gewisse Anzahl an Zeilen (table) hat. In jeder Zelle dieser Zeilen befinden sich <input type="text"> Felder.
Da es unter vorkommen kann, dass die angeführten Zeilen zu wenig sind, habe ich ein script (pluss button) eingebaut, das mir weitere Zeilen einfügt, ganz im Layout der restlichen Zeilen.
Das Funktioniert soweit prima. Nun kommt mein Problem.
Die Werte (Zahlen) die in selbige input Felder eingegeben werden sollen von einem anderen Feld abgezogen werden (was auch funktioniert). Allerdings geht das nur, bei den fix "montierten" input feldern. Die dynamisch nachträglich erzeugten Inputfelder (die auch den selben eventhandler haben) reagieren nicht auf das Event "onChange".

Kleines Beispiel (sinngemäß):

---

[Quote]
function hallo (i){
alert("Na Hallo, du bist der " + i + "te!");
}

<!-- fixen Zeilen:
<input type="text" value="" onChange="hallo(1)">

<!-- mittles Javascript dynamisch erstelltes Feld:
<input type="text" value="" onChange="hallo(2)">[/Quote]

wie gesagt der Bereich "<!-- fixen Zeilen:" funktioniert, die "<!-- mittles Javascript dynamisch erstelltes Feld:" tut nichts.
Selbst wenn ich die Funktion direkt in den Event-Handler eintrage (javascript:alert(hello); passiert gar nichts....

Was mach ich falsch? Kann mir jemand helfen?

[derletztekick]

Hallo tommylee,

ich habe es mal versucht und konnte keinen Fehler entdecken.

Mit freundlichem Gruß
Micha

[Ike]

Ja wie ich geschreiben hatte... über DOM gehts ohne Probleme... nur über innerHTML o.ä. gehts nicht... ich bin einfach mal davon ausgegangen, dass tommylee es mit innerHTML o.ä. gemacht hat...

Hallo tommylee,

ich habe es mal versucht und konnte keinen Fehler entdecken.

Mit freundlichem Gruß
Micha

[derletztekick]

Hallo Ike,

Ja wie ich geschreiben hatte...

warum fühlst Du Dich angesprochen? Meine Antwort ging dirket tommylee und nicht an Dich - das ist der Sinn eines Forums.

Darüber hinaus habe ich Deinen Eintrag nicht lesen können, da er, als ich auf antworten geklickt habe, noch nicht vorhanden war.

Mit freundlichem Gruß
Micha

[Ike]

Hei wow, so war's nicht gemeint! Ganz locker bleiben... ;-)
Ich wollte vielmehr tommylee von meiner Antwort eine weiterführende Verbindung zu deiner herstellen! Falls ihm mein DOM-Vorschlag nicht ganz klar sein sollte, den du ja bestens umgesetzt hast...

Schönen Tag noch!

Hallo Ike,

Ja wie ich geschreiben hatte...
warum fühlst Du Dich angesprochen? Meine Antwort ging dirket tommylee und nicht an Dich - das ist der Sinn eines Forums.

Darüber hinaus habe ich Deinen Eintrag nicht lesen können, da er, als ich auf antworten geklickt habe, noch nicht vorhanden war.

Mit freundlichem Gruß
Micha

[Tommylee]

Hallo tommylee,

ich habe es mal versucht und konnte keinen Fehler entdecken.

Mit freundlichem Gruß
Micha

So: dank dem Tip von euch beiden, habe ich es jetzt geschafft, dass er den Event-Handler zumindest nichtmehr ignoriert.

Ein kleines Problem hab ich allerdings noch.
In dem Script das mit dem EventHandler ausgeführt wird, trägt er mehrere Werte zusammen. Um genau zu sein, liest er den wert aus einem Feld ein, beschreibt ein "hidden-Feld" damit und rechnet ihn zugleich von einem anderen (fixen) Feld ab.
Mein Problem ist jetzt, dass das zweite feld (das hidden-feld) in das er den wert schreiben soll ebenfalls ein dynamisch erstelltes feld ist. Und ich dessen wert nicht mit "document.hiddenfeld[zahl].value" auslesen kann.
Er sagt mir immer nur, dass es sich dabei entweder um kein objekt handelt oder es NULL ist.
Nun ist die Frage, warum!?

danke für eure hilfe!
mfg tommylee

[Struppi]

Mein Problem ist jetzt, dass das zweite feld (das hidden-feld) in das er den wert schreiben soll ebenfalls ein dynamisch erstelltes feld ist. Und ich dessen wert nicht mit "document.hiddenfeld[zahl].value" auslesen kann.
Er sagt mir immer nur, dass es sich dabei entweder um kein objekt handelt oder es NULL ist.
Nun ist die Frage, warum!?

Weil das Element aus der Collection mit den Namen 'hiddenfeld' und dem Index zahl nicht existiert.

Struppi.

[tommylee]

Weil das Element aus der Collection mit den Namen 'hiddenfeld' und dem Index zahl nicht existiert.

Struppi.

naja, sie wurden dynamisch erstellt, wie kann ich ihm (dem browser) dann begreiflich machen, dass sie "existieren"...?

[Struppi]

Hallo tommylee

Weil das Element aus der Collection mit den Namen 'hiddenfeld' und dem Index zahl nicht existiert.

Struppi.

naja, sie wurden dynamisch erstellt, wie kann ich ihm (dem browser) dann begreiflich machen, dass sie "existieren"...?

Deine Informationen sind spärlich und man muss sich Mühe geben zu erraten, dass du sehr wahrscheinlich den IE benutzt und versuchst mit createElement und appendChild Formularelemente hinzuzügen, auf diese elemente aber nicht mit documentforms[....].elements[....] zugreifen kannst.

Das ist ein spezifisches IE Problem, dass sich entweder dadurch lösen läßt, dass du createElement mit einem IE Spezifischen Parameter benutzt ( document.createElement('<input name="name">') - ich bin nicht 100% sicher, da ich das so noch nie gebraucht habe) oder in dem du mit JS direkt auf das mit createElement erzeugte Elemente zugreifst.

In etwa nach deinem "Beispiel" so:

var el = document.createElement('input');
el.type = 'text';
el.name = 'name';
el.onchange = function()
{
hallo(2);
};
[obj].appendChild( el );

Struppi.

[tommylee]

Deine Informationen sind spärlich und man muss sich Mühe geben zu erraten, dass du sehr wahrscheinlich den IE benutzt und versuchst mit createElement und appendChild Formularelemente hinzuzügen, auf diese elemente aber nicht mit documentforms[....].elements[....] zugreifen kannst.

Das ist ein spezifisches IE Problem, dass sich entweder dadurch lösen läßt, dass du createElement mit einem IE Spezifischen Parameter benutzt ( document.createElement('<input name="name">') - ich bin nicht 100% sicher, da ich das so noch nie gebraucht habe) oder in dem du mit JS direkt auf das mit createElement erzeugte Elemente zugreifst.

In etwa nach deinem "Beispiel" so:

var el = document.createElement('input');
el.type = 'text';
el.name = 'name';
el.onchange = function()
{
hallo(2);
};
[obj].appendChild( el );

Ich nahm an, dass das klar war (bezügl CreateElements) da die beiden vorposter durchaus erkannt hatten warauf ich hinaus will .. naja seis drum.

Dein Beispiel, hat dein Vorposter ebenfalls schon gemacht. Das erstellen der Formularfelder, bzw. das erstellen der Tabel-elemente ist nicht das problem. Der zugriff mittels eines bestehenden Scripts auf den Inhalt der dynamisch erstellten Input-Felder ist eher das was nicht funktioniert!

mfg tommylee

[Struppi]

Dein Beispiel, hat dein Vorposter ebenfalls schon gemacht. Das erstellen der Formularfelder, bzw. das erstellen der Tabel-elemente ist nicht das problem.

Doch das ist das Problem, da ...

Der zugriff mittels eines bestehenden Scripts auf den Inhalt der dynamisch erstellten Input-Felder ist eher das was nicht funktioniert!

das Problem erst dadurch entsteht. Und das Problem tritt nur im IE auf, oder?
(Das wäre wichtig zu Wissen, da dieser damit einige Probleme hat)

Und nach wie vor sind deine Informationen zu spärlich um dir anders zu helfen. du hast uns bis jetzt nur ein alert('hallo') gezeigt und symbolischen HTML Code, wenn du nicht verrätst wie du was machst wird dir keiner eine andere Lösung zeigen konnen.

Struppi.

[Struppi]

Ich nahm an, dass das klar war (bezügl CreateElements) da die beiden vorposter durchaus erkannt hatten warauf ich hinaus will .. naja seis drum.

Könntest du auch noch mal diese Frage durchlesen https://forum.selfhtml.org/?t=135383&m=879145

Das was dort nämlich schreibst ist falsch.

Struppi.

[Struppi]

Mein Problem ist jetzt, dass das zweite feld (das hidden-feld) in das er den wert schreiben soll ebenfalls ein dynamisch erstelltes feld ist. Und ich dessen wert nicht mit "document.hiddenfeld[zahl].value" auslesen kann.
Er sagt mir immer nur, dass es sich dabei entweder um kein objekt handelt oder es NULL ist.
Nun ist die Frage, warum!?

Ach, das ist mir gar nicht aufgefallen, dein hiddenfeld ist kein Teil eines Formulares?

Struppi.