Bionicman: AJAX Formularfelder auswerten

Hallo,

Ok, es ist nicht wirklich AJAX, da ich lediglich einem Formular per JavaScript input-Fields hinzufüge.

Mein Problem ist, dass ich diese dynamisch hinzugefügten Felder nicht auswerten kann. Ich bin sicher, dass das Problem schon irgendwo behandelt wurde, aber ich finde nichts dazu :(

Also:

  • Formular hat 3 Felder
  • Per JS kann der User Felder hinzufügen. Die Felder habe ich mit name="etwas[]" als Array definiert.

Problem:

  • JS zeigt mir per form.elements.length immer nur 3 an. Also die Ausgangsfelder.
  • PHP erhält ebenfalls nicht die neuen Daten.

Wäre nett wenn mir Jemand zeigen könnte, wo ich dazu etwas finden kann.

Gruß,
Olli

    • Per JS kann der User Felder hinzufügen. Die Felder habe ich mit name="etwas[]" als Array definiert.

    Und Du bist Dir absolut sicher, dass die Felder dort eingefügt werden, wo sie auch ausgewertet werden können (also innerhalb des form-Elementes)?

    Siechfred

    --
    Hinter den Kulissen passiert viel mehr, als man denkt, aber meistens nicht das, was man denkt.
    1. Und Du bist Dir absolut sicher, dass die Felder dort eingefügt werden, wo sie auch ausgewertet werden können (also innerhalb des form-Elementes)?

      Ja bin sicher, meine form umfasst praktisch die ganze Seite.
      Ich habe innerhalb der Form eine table in die ich dann dynamisch generierte <tr><td><input></td></tr> einfüge.

      1. Wie erstelle ich denn die inputs am besten?

        1. Indem ich ein vorhandenes Feld klone?
           cloneNode()
        2. Indem ich ein input generiere?
           createElement("input");
        3. Indem ich einfach das innerHTML setze?
           var new_td = document.createElement("td");
           new_td.innerHTML = '<tr><td><input></td></tr>';

        1. Hallo Bionicman,

          1. Indem ich einfach das innerHTML setze?
               var new_td = document.createElement("td");
               new_td.innerHTML = '<tr><td><input></td></tr>';

          tr in td ist nicht wirklich gut.

          Der Firefox bietet dir die Möglichkeit, dir den per Javascript erzeugten Quellcode anzuzeigen (markieren -> rechte Maustaste -> Auswahl-Quelltext anzeigen).

          Gruß, Jürgen

          1. tr in td ist nicht wirklich gut.

            tr in td, wie kommst du darauf? <tr><td> bedeutet td in tr und ist, denke ich, ganz normal!

            Der Firefox bietet dir die Möglichkeit, dir den per Javascript erzeugten Quellcode anzuzeigen (markieren -> rechte Maustaste -> Auswahl-Quelltext anzeigen).

            Weiss ich aber der per Javascript erzeugte Code wird nicht angezeigt, obwohl ich die Felder sehen kann.

            1. tr in td, wie kommst du darauf? <tr><td> bedeutet td in tr und ist, denke ich, ganz normal!

              achso, jetzt hab ich verstanden. sry. du hast natürlich recht. geht aber auch nicht wenn ich ins innerHTML nur ein input schreibe.

            2. Hallo Bionicman,

              Weiss ich aber der per Javascript erzeugte Code wird nicht angezeigt, obwohl ich die Felder sehen kann.

              also bei mir geht das, sowohl das dynamische Erzeugen von Inputfeldern, als auch das Anzeigen des so erzeugten Queltextes. Vieleicht zeigst du uns mal etwas Code oder einen Link auf deine Seite, damit wir nicht so in Blaue raten müssen.

              Gruß, Jürgen

              1. Hallo Bionicman,

                also bei mir geht das, sowohl das dynamische Erzeugen von Inputfeldern, als auch das Anzeigen des so erzeugten Queltextes. Vieleicht zeigst du uns mal etwas Code oder einen Link auf deine Seite, damit wir nicht so in Blaue raten müssen.

                Gruß, Jürgen

                »»

                Im wesentlichen sind das die Teile:
                Klappt auch wunderbar, nur kann die Felder wenn sie erzeugt wurden, nicht ansprechen :(

                Die JS Funktion:

                function add_contact()
                {
                 var new_tr = document.createElement("tr");
                 var new_td = document.createElement("td");
                 new_td.setAttribute("height","20");
                 new_tr.appendChild( new_td );
                 document.getElementById("contacts").appendChild( new_tr );

                var new_tr = document.createElement("tr");
                 var new_td = document.createElement("td");

                new_td.innerHTML = 'Name:<br /><input type="text" name="names[]" size="60"><br />Tel:<br /><input type="text" name="tel[]" size="60"><br />Mail:<br /><input type="text" name="mail[]" size="60">';

                new_tr.appendChild( new_td );
                 document.getElementById("contacts").appendChild( new_tr );

                }

                Die html-Seite:

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>etwas</title>
                </head>

                <body>

                <table width="100%" cellpadding="0" cellspacing="0">
                <form name="info_form" action="#" method="post" onsubmit="sendRequest(this)">

                <tr><td>
                   <table class="text" bgcolor="#f2f2f2" width="100%" cellpadding="0" cellspacing="0">
                <tr>
                     <td class="text">Kontakt/e:</td>
                     <td>
                            <table id="contacts" cellpadding="0" cellspacing="0">
                            <tr>
                            <td>Name:<br /><input type="text" name="names[]" size="60"><br />Tel:<br /><input type="text" name="tel[]" size="60"><br />Mail:<br /><input type="text" name="mail[]" size="60"></td>
                            </tr>
                            </table>
                            </td>
                     </tr>

                </table>
                </td></tr>
                </form>
                </table>

                </body>
                </html>

                1. Hallo Bionicman,

                  document.getElementById("contacts").appendChild( new_tr );

                  die TRs sind Kinder von tbody, nicht von table. Du must sie in den tbody einhängen. Der tbody ist implizit immer da. Versuch mal

                  document.getElementById("contacts").getElementsByTagName("tbody")[0].appendChild( new_tr );

                  <table width="100%" cellpadding="0" cellspacing="0">
                  <form name="info_form" action="#" method="post" onsubmit="sendRequest(this)">

                  <tr><td>

                  zwischen table und tr hat ein form nichts zu suchen. Wenn du per Javascript im HTML Änderungen durchführst, ist valider Code unerlässlich.

                  Gruß, Jürgen

              2. Hallo Bionicman,

                also bei mir geht das, sowohl das dynamische Erzeugen von Inputfeldern, als auch das Anzeigen des so erzeugten Queltextes. Vieleicht zeigst du uns mal etwas Code oder einen Link auf deine Seite, damit wir nicht so in Blaue raten müssen.

                Gruß, Jürgen

                Merkwürdig.

                Im IE7 ist es genau anders herum. Kann die Felder nicht sehen, also es passiert nichts beim Klick auf den anhängen Button, aber ich kann auf die Felder zugreifen??? Sie scheinen also erstellt zu werden, hmm.