Elya: Via JS/DOM eingehängte form-Elemente übergeben Werte nicht (FF)

Hallo,

wieder mal Javascript... Folgendes Szenario:

In einem größeren "create customer"-Formular wird per Select ein Status ausgewählt und abhängig davon onchange unterschiedliche weitere Formularfelder  eingeblendet (display), die vorher per createElement eingehängt worden sind. Dies funktioniert soweit fehlerlos in FF und IE(6). Was im FF nicht funktioniert, ist die Übergabe der Werte via POST an das PHP-Script.

Genauer:

  • Status wird auf "FOO" gesetzt
  • Einblenden Formularblock mit einigen hart codierten und einigen zusätzlich erzeugten Elementen
  • Button "weiteren PLZ-Bereich einfügen"
  • Einhängen weiterer 2 Felder "PLZ-Bereiche"
  • speichern der Anzahl der PLZ-Bereich-Felder in ein hidden input.

--> Ausfüllen, Absenden des Formulars. Übergabe der Werte per POST an PHP.

Das ganze ebenso bei bereits vorhandenen Datensätzen, auch hier können neue PLZ-Felder hinzugefügt werden.

So wurden die Felder erzeugt:

  
var count_current_entries = document.getElementById("plz_region_list").getElementsByTagName("li").length;  
// plz_region_list ist die umgebende <ul>  
var new_region = document.createElement("li");  
new_region.setAttribute("id", "dealer_codearea_"+ (count_current_entries + 1) );  
new_region.setAttribute("class", "plz_region_list");  
new_region.innerHTML = '<input type="text" name="dealer_codearea_from_'+ (count_current_entries+1) +'" id="dealer_codearea_from_'+ (count_current_entries+1) +'">&nbsp;-&nbsp;<input type="text" name="dealer_codearea_to_'+ (count_current_entries +1) +'" id="dealer_codearea_to_'+ (count_current_entries +1) +'">';  
document.getElementById("plz_region_list").appendChild(new_region);  

Per JS ließen sich die erzeugten Elemente sowohl mit getElementById als auch  mit getElementsByName mit ihrem korrekt erzeugten Namen ansprechen, auch eingegebene Werte konnten wir sauber abfragen. Was nicht ging: Per Schleife die form-Elemente durchzählen und sich die Namen per alert() ausgeben lassen. Die zeigte IE sauber an, beim FF fehlten die Namen der erzeugten Elemente.

Alternativ haben wir probiert, die <input>-Felder auch per createElement einzuhängen und auch die Attribute direkt per object.name zuzuweisen. Machte im Ergebnis keinen Unterschied: Im Firefox kommt im $_POST-Array weder Parameter noch Wert an.

Falls es hilft: das ganze ist eine Zusatzfrickelei im Umfeld des Adminbereichs einer XT-Commerce-Installation, das sollte aber eigentlich keinen Rolle spielen.

Hat jemand eine Idee, wo wir noch ansetzen könnten? Danke für jeden Tipp!

Gruß aus Köln-Ehrenfeld,

Elya

--
  1. In einem größeren "create customer"-Formular wird per Select ein Status ausgewählt und abhängig davon onchange unterschiedliche weitere Formularfelder  eingeblendet (display), die vorher per createElement eingehängt worden sind. Dies funktioniert soweit fehlerlos in FF und IE(6). Was im FF nicht funktioniert, ist die Übergabe der Werte via POST an das PHP-Script.

    Werden die Felder auch 100% in das Formular eingefügt, also gibt es ein [Feld].form?

    Struppi.

    1. Hallo Struppi,

      Werden die Felder auch 100% in das Formular eingefügt, also gibt es ein [Feld].form?

      das habe ich ja zu prüfen versucht. Sie sind sichtbar, werden im IE auch gefunden via form[0].elements[n].name usw. (d.h. es ist zumindest das Attribut zum Feld vorhanden, daraus schließe ich auf Existenz des Elements.

      Wie meinst du [feld].form? Diese Notation ist mir leider unbekannt.

      Gruß aus Köln-Ehrenfeld,

      Elya

      --
      1. Hi,

        das habe ich ja zu prüfen versucht. Sie sind sichtbar, werden im IE auch gefunden via form[0].elements[n].name usw. (d.h. es ist zumindest das Attribut zum Feld vorhanden, daraus schließe ich auf Existenz des Elements.

        woraus schließt Du die Existenz des Elements _innerhalb des Formulars_ bei Firefox?

        Wie meinst du [feld].form? Diese Notation ist mir leider unbekannt.

        Er meint vermutlich die form-Eigenschaft des Formularelements, welche das zugehörige Formular referenziert. Handelt es sich um genau das Formular, welches Du vermutest?

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hallo Cheatah,

          woraus schließt Du die Existenz des Elements _innerhalb des Formulars_ bei Firefox?

          Wie meinst du [feld].form? Diese Notation ist mir leider unbekannt.

          Er meint vermutlich die form-Eigenschaft des Formularelements, welche das zugehörige Formular referenziert. Handelt es sich um genau das Formular, welches Du vermutest?

          Es gibt nur ein Formular im Dokument. Es ist aber in der Tat so, daß das Element im Firefox (und btw. auch Safari) nicht sein Elternelement kennt. Und zwar sowohl, wenn ich es über

          document.forms['customers'].elements['dealer_codearea_from_1'].form.name

          oder document.customers.dealer_codearea_from_1.form.name

          oder direkt über
          document.getElementById('dealer_codearea_from_1').form.name

          anspreche. IE hingegen schmeißt mir sauber den Formularnamen aus. Dem Formular zusätzlich eine id zu geeben (zugegeben, Herumgestochere), hat nichts gebracht.

          Was kann ich tun?

          Gruß aus Köln-Ehrenfeld,

          Elya

          --
          1. Es gibt nur ein Formular im Dokument. Es ist aber in der Tat so, daß das Element im Firefox (und btw. auch Safari) nicht sein Elternelement kennt. Und zwar sowohl, wenn ich es über

            document.forms['customers'].elements['dealer_codearea_from_1'].form.name

            Der name spielt hier keine Rolle, ich habe nicht umsonst .form geschrieben, das ist die Referenz des Formulares des Elements.

            anspreche. IE hingegen schmeißt mir sauber den Formularnamen aus. Dem Formular zusätzlich eine id zu geeben (zugegeben, Herumgestochere), hat nichts gebracht.

            Was kann ich tun?

            Du hast das Element nicht sauber in das Formular eingefügt, ändere das.

            Struppi.

            1. Hallo Struppi,

              Der name spielt hier keine Rolle, ich habe nicht umsonst .form geschrieben, das ist die Referenz des Formulares des Elements.

              Gut: das gibt beim FF [NULL] und beim IE [object]

              Du hast das Element nicht sauber in das Formular eingefügt, ändere das.

              ja, das vermute ich auch. Das Problem: ich hab's über'aupt nicht gemacht, sondern debugge hier den Code eines kranken Kollegen ;-) - Was könnte am "Einfüge"-Code (siehe mein erstes Post) zu verändern sein? Ich habe wie erwähnt schon die mir bekannten Varianten (innerHTML, create/appendChild, setAttributes oder Attribute direkt setzen) durchprobiert, sonst wär ich nicht hier... Wo kann ich ansetzen, um die Stelle zu finden, wo es "falsch" eingehängt wurde?

              Zwischengedanke: Da es sich um den bekannten Spaghetticode von XTCOmmerce handelt, der selbstverständlich alles andere als sauber und valide ist,  könnte das den FF beim DOM-Tree verwirren?

              Gruß aus Köln-Ehrenfeld,

              Elya

              --
              1. Der name spielt hier keine Rolle, ich habe nicht umsonst .form geschrieben, das ist die Referenz des Formulares des Elements.

                Gut: das gibt beim FF [NULL] und beim IE [object]

                Was auf's selbe herauskommt ;-)
                aber im erfolgsfall, also wenn das Element in einem Formular wäre, würde er der FF auch sowas wie HTMLFormelement ausgeben.

                Du hast das Element nicht sauber in das Formular eingefügt, ändere das.

                [...] Wo kann ich ansetzen, um die Stelle zu finden, wo es "falsch" eingehängt wurde?

                schwierig, da dein HTML code ja nicht bekannt ist. Auf jeden Fall ist das die Stelle wo du die Elemente einfügst:

                document.getElementById("plz_region_list").appendChild(new_region);

                Die Frage ist, ob das Element mit der ID "plz_region_list" innerhalb eines Forms ist?

                Zwischengedanke: Da es sich um den bekannten Spaghetticode von XTCOmmerce handelt, der selbstverständlich alles andere als sauber und valide ist,  könnte das den FF beim DOM-Tree verwirren?

                Nicht auszuschliessen.

                Struppi.

                1. Hallo Struppi,

                  Zwischengedanke: Da es sich um den bekannten Spaghetticode von XTCOmmerce handelt, der selbstverständlich alles andere als sauber und valide ist,  könnte das den FF beim DOM-Tree verwirren?

                  Nicht auszuschliessen.

                  so war es. Ich hab mir schließlich den Tort angetan und den Mist validiert - das form-Element war schlicht falsch verschachtelt in dem ganzen Tabellenwust, was den Fehler verursacht hat. Beim "create_customer" war das noch vergleichsweise einfach zu reparieren, beim "edit"-Skript, das 5 Formulare in einem ist ;-) kamen wir nur durch Auslagerung und komplette Kastration des Tabellenkorsetts zum Ziel... *schweißvonderstirnwisch* Aber jetzt läuft's. Danke Euch für die Denkhilfen.

                  Gruß aus Köln-Ehrenfeld,

                  Elya

                  --
          2. Was kann ich tun?

            Hast Du mal im DOM-Inspector nachgesehen, wo und mit welchen Attributen und Werten Deine Elemente in den Baum eingehängt wurden?

            Siechfred

            --
            Wir vom Moderatorenteam haben keinerlei Humor, von dem wir wüssten.
            1. Hallo Siechfred,

              Hast Du mal im DOM-Inspector nachgesehen, wo und mit welchen Attributen und Werten Deine Elemente in den Baum eingehängt wurden?

              guter Tipp, die Elemente werden im DOM-Inspektor an der vermeintlich richtigen Stelle angezeigt, aber beim Anklicken nicht, wie alle anderen Elemente, rot umrandet. Als Wert kriege ich "object HTMLInputElement", das scheint richtig. Bei "form" steht auch das richtige Form-Element. Welche Attribute könnten mir hier noch weiterhelfen? Ich kenne mich mit dem DOM-Inspektor leider nicht sehr aus.

              Gruß aus Köln-Ehrenfeld,

              Elya

              --
              1. Hallo Siechfred,

                Hast Du mal im DOM-Inspector nachgesehen, wo und mit welchen Attributen und Werten Deine Elemente in den Baum eingehängt wurden?

                guter Tipp, die Elemente werden im DOM-Inspektor an der vermeintlich richtigen Stelle angezeigt, aber beim Anklicken nicht, wie alle anderen Elemente, rot umrandet.

                Korrektur: die Elemente werden doch korrekt rot umrandet. Ich hatte aus Versehen ein hidden-Element erwischt, das ähnlich hieß. Eingegebene Werte werden auch korrekt angezeigt.

                Gruß aus Köln-Ehrenfeld,

                Elya

                --
                1. guter Tipp, die Elemente werden im DOM-Inspektor an der vermeintlich richtigen Stelle angezeigt, aber beim Anklicken nicht, wie alle anderen Elemente, rot umrandet.

                  Das ist schlecht, denn dann stimmt irgendwas nicht, aber das weißt Du ja selber :)

                  Ich habe mal versucht, Dein Problem auf eine Testseite zu reduzieren:
                  http://test.anaboe.net/_jsprob.html

                  Es funktioniert wie erwartet. Irgendwo ist bei Dir noch ein Haken, den man wohl nur anhand einer konkreten Testseite finden kann.

                  Siechfred

                  --
                  Wir vom Moderatorenteam haben keinerlei Humor, von dem wir wüssten.
                  1. Es funktioniert wie erwartet. Irgendwo ist bei Dir noch ein Haken, den man wohl nur anhand einer konkreten Testseite finden kann.

                    ich hatte die Funktionalität auch bereits geprüft ;-)

                    Der Hacken ist der, das die Elemente offensichtlich nicht in das Formular eingefügt werden, zumindest vom FF, d.h. der Fehler dürfte eher im HTML Code liegen.

                    Struppi.