Mit JavaScript generierte Input Felder mit POST submitten?

[philba]

Hallo Leute,

habe jetzt schon einige Zeit google und das archiv bemüht aber finde einfach keine Antwort auf meine Frage daher frag ich hier.

Ich habe mit JavaScript und Dom mir eine Tabelle aufgebaut in der einige Inputfelder erstellt werden. Dazu ein Button, der beim Betätigen eine neue Reihe an Input Feldern bereitstellt.

Mein Problem nun ist, das im Internet Explorer wenn ich das submitte, auf der nächsten Seite einfach nichts übermittelt wurde.

echo "<pre>" . print_r($_POST) . "</pre>";

gibt nur hard-codierte felder aus wie zBsp eine combo-box.

Im Firefox ist das alles kein Problem, der übermittelt auch die mit JavaScript generierten Felder.

Kann mir jemand helfen?

Viele Grüße,
Philba

[hawkmaster]

Hallo

Mein Problem nun ist, das im Internet Explorer wenn ich das submitte, auf der nächsten Seite einfach nichts übermittelt wurde.

hast du vielleicht einfach vergessen ein <form> Element zu platzieren?

viele Grüße
hawk

[philba]

Hi Hawk,

hast du vielleicht einfach vergessen ein <form> Element zu platzieren?

nein, das habe ich drin :-)

[molily]

Hallo,

Im Firefox ist das alles kein Problem, der übermittelt auch die mit JavaScript generierten Felder.

Dann werden im IE vermutlich die Eingabefelder nicht korrekt im DOM generiert und platziert.
Untersuche mal den erzeugten DOM-Elementenbaum. Das geht z.B. mit der Internet Explorer Developer Toolbar.
Und zeige uns mal den Code, der die Elemente erzeugt und einhängt.

Mathias

[philba]

Untersuche mal den erzeugten DOM-Elementenbaum. Das geht z.B. mit der Internet Explorer Developer Toolbar.

Werden ich gleich mal tun.

Und zeige uns mal den Code, der die Elemente erzeugt und einhängt.

  
function createTable(array,rowStart,tableId){  
  
    tableBody = document.createElement( "tbody" );  
    tableBody.id = "tableBody_"+tableId;  
    document.getElementById( tableId ).appendChild( tableBody );  
  
    for( var x = 0; x < 1; x++){  
        var zeile = document.createElement( "tr" );  
            for(var y = 0; y < array.length; y++){  
                var inhalt = document.createTextNode(array[y]);  
                var spalte = document.createElement("th");  
                spalte.appendChild(inhalt);  
                zeile.appendChild(spalte);  
            }  
        tableBody.appendChild(zeile);  
    }  
  
    for( var x = rowStart; x < rowStart+1; x++){  
        var zeile = document.createElement( "tr" );  
        zeile.id = "tr_"+x;  
            for(var y = 0; y < array.length; y++){  
  
                var inhalt = document.createElement("input");  
                inhalt.setAttribute("name", array[y] + "_" + x);  
                inhalt.setAttribute("id"  , array[y] + "_" + x);  
                inhalt.setAttribute("type", "text");  
                inhalt.setAttribute("size", "8");  
                inhalt.setAttribute("onblur", "init(this," + x +");");  
                var spalte = document.createElement("td");  
                spalte.appendChild(inhalt);  
                inhalt.parentNode.innerHTML = inhalt.parentNode.innerHTML;  
                zeile.appendChild(spalte);  
  
            }  
        tableBody.appendChild(zeile);  
    }  
}  

Das wäre der Code.

[Struppi]

var inhalt = document.createElement("input");
                inhalt.setAttribute("name", array[y] + "_" + x);
                inhalt.setAttribute("id"  , array[y] + "_" + x);
                inhalt.setAttribute("type", "text");
                inhalt.setAttribute("size", "8");
                inhalt.setAttribute("onblur", "init(this," + x +");");

Wie du schon erkannt hast, setAttribute ist hier nicht so günstig. Besser ist es die direkte Schreiweise zu verwenden.

inhalt.name = array[y] + "_" + x;  
inhalt.id = array[y] + "_" + x;  
inhalt.type = "text"; // Das ist überflüssig, weil es der Standard ist  
inhalt.size = 8;  
inhalt.onblur = function() { init(this, x); };  

Struppi.

[philba]

Ja, das habe ich erkannt.

Vielen Dank für deine Tipps.

Gruß,
Philipp

[philba]

var inhalt = document.createElement("input");
                inhalt.setAttribute("name", array[y] + "_" + x);
                inhalt.setAttribute("id"  , array[y] + "_" + x);
                inhalt.setAttribute("type", "text");
                inhalt.setAttribute("size", "8");
                inhalt.setAttribute("onblur", "init(this," + x +");");

Wie du schon erkannt hast, setAttribute ist hier nicht so günstig. Besser ist es die direkte Schreiweise zu verwenden.

inhalt.name = array[y] + "_" + x;

inhalt.id = array[y] + "_" + x;
inhalt.type = "text"; // Das ist überflüssig, weil es der Standard ist
inhalt.size = 8;
inhalt.onblur = function() { init(this, x); };

>   
> Struppi.  
  
Habe doch noch ein Problem.  
Im Internet explorer funktioniert:  
  
`inhalt.name = array[y] + "_" + x;`{:.language-javascript}  
  
nicht. Wenn ich mit der Webdeveloper Toolbar schaue, gibt es kein Name-Attribute. Ohne Name-Attribute übergibt der IE keine Elemente beim Submit.  
  
Wenn ich:  
`var inhalt = document.createElement("<input name='" + xy + "'>");`{:.language-php}  
  
probiere, gehts im IE aber nicht mehr im FF.  
Gibt es eine Lösung die in beiden Funktioniert oder muss ich abfragen einbauen für die einzelnen Browser?

[Struppi]

inhalt.name = array[y] + "_" + x;

nicht. Wenn ich mit der Webdeveloper Toolbar schaue, gibt es kein Name-Attribute. Ohne Name-Attribute übergibt der IE keine Elemente beim Submit.

Das erste glauibe ich dir, das zweite kann ich nicht nachvollziehen, der IE (7 zumindest) überträgt bei mir auhc die Felder, die ich mit JS einfüge.

Struppi.

[philba]

inhalt.name = array[y] + "_" + x;

nicht. Wenn ich mit der Webdeveloper Toolbar schaue, gibt es kein Name-Attribute. Ohne Name-Attribute übergibt der IE keine Elemente beim Submit.

Das erste glauibe ich dir, das zweite kann ich nicht nachvollziehen, der IE (7 zumindest) überträgt bei mir auhc die Felder, die ich mit JS einfüge.

Struppi.

Wenn ich kein Name-Attribute habe (IE6 [Firmenstandard atm ...]) überträgt er keine Felder. Warum auch immer.
Wenn ich ein Name Attribute drin habe, gehts.

Nun die Frage, gibts eine Form, die ich schreiben kann, die in FF und IE funktioniert?
Oder soll ich eine Abfrage einbauen if(IE){ .. murks .. }else{ machs richtig } .. ?

[Struppi]

Wenn ich kein Name-Attribute habe (IE6 [Firmenstandard atm ...]) überträgt er keine Felder. Warum auch immer.

Das habe ich auch nie bestritten.

Wenn ich ein Name Attribute drin habe, gehts.

Eben.

Nun die Frage, gibts eine Form, die ich schreiben kann, die in FF und IE funktioniert?

Ja.

var n = document.createElement('input');  
n.name = 'test';  

Struppi.

[philba]

Wenn ich kein Name-Attribute habe (IE6 [Firmenstandard atm ...]) überträgt er keine Felder. Warum auch immer.

Das habe ich auch nie bestritten.

Wenn ich ein Name Attribute drin habe, gehts.

Eben.

Nun die Frage, gibts eine Form, die ich schreiben kann, die in FF und IE funktioniert?

Ja.

var n = document.createElement('input');

n.name = 'test';

>   
> Struppi.  
  
~~~javascript
  
                var str = array[y] + "_" + x;  
                var inhalt = document.createElement("input");  
                inhalt.name = str;  

Was mache ich Falsch?
Das funktioniert nicht im IE 6 =/

[Struppi]

Was mache ich Falsch?

Keine Ahnung.

Das funktioniert nicht im IE 6 =/

und das?

Struppi.

[philba]

Was mache ich Falsch?

Keine Ahnung.

Das funktioniert nicht im IE 6 =/

und das?

Struppi.

Ja, das funktioniert.
Wie hast du die Elemente gebaut?

[Struppi]

Wie hast du die Elemente gebaut?

Steht im Quellcode.

Struppi.

[philba]

Wie hast du die Elemente gebaut?

Steht im Quellcode.

Struppi.

el.form.appendChild(n);

Das verstehe ich nicht ganz.
Du übergibst beim Methodenaufruf this.
Somit ist el dein button.

Wieso gehst du dann auf el.form.appendChild(xy);?
Wieso das form?

[Struppi]

Wieso gehst du dann auf el.form.appendChild(xy);?
Wieso das form?

Das ist das Formular eines Elementes.

Struppi.

[philba]

Wieso gehst du dann auf el.form.appendChild(xy);?
Wieso das form?

Das ist das Formular eines Elementes.

Struppi.

Hm, wenn ich versuche

  
inhalt.form.name = xy; 

zu schreiben geht nix ..

Ich bin mit meinem Latein echt am Ende.

Der InternetExplorer nimmt bei mir das Name Attribute nur, wenn ich

var inhalt = document.createElement('<input name='" + xy + "'>');

schreibe. Aber diese Weise funktioniert im Firefox wiederum nicht.
Aber es muss doch i-wo der Fehler sein, warum der IE bei mir nicht

inhalt.name = xy;

nimmt ...

Dieser Browserkrieg ist nichts für meine Nerven :)

[Struppi]

Hm, wenn ich versuche

inhalt.form.name = xy;

>   
> zu schreiben geht nix ..  
  
Was soll da gehen? du änderst den Namen des Formulars.  
  

> schreibe. Aber diese Weise funktioniert im Firefox wiederum nicht.  
> Aber es muss doch i-wo der Fehler sein, warum der IE bei mir nicht  
>   
> inhalt.name = xy;  
>   
> nimmt ...  
  
Der IE überträgt dieses Element, wenn es bei dir nicht so ist, liegt nicht hier der Fehler, sondern woanders, nur wir kennen das woanders nicht.  
  
Struppi.

[philba]

Ok.

Ich habe folgenden PHP Code:

        echo "<form action='gen.php?sid=" . session_id() . "' method='POST' name='myForm'  id='myForm' >";  
            echo "<table cellspacing='0' cellpadding='0' id='r'>";  
            echo "</table>";  
            echo "<table cellspacing='0' cellpadding='0' id='e'>";  
            echo "</table>";  
            echo "<br /><br />";  
            echo "<input type='button' id='sub' name='sub' value='Absenden' >";  
        echo "</form>";

onload der Seite wird folgende Funktion aufgerufen:

function start(){  
    createTable(rufbereitschaftSpaltenArray ,0      ,"r");  
    createTable(einsatzzeitSpaltenArray     ,100    ,"e");  
    document.getElementById("LfdNr_0").value = 1;  
}

Und dort führt er dann die funktion createTable aus.
Diese nochmal hier:

function createTable(array,rowStart,tableId){  
  
    tableBody = document.createElement( "tbody" );  
    tableBody.id = "tableBody_"+tableId;  
    document.getElementById( tableId ).appendChild( tableBody );  
  
    for( var x = 0; x < 1; x++){  
        var zeile = document.createElement( "tr" );  
            for(var y = 0; y < array.length; y++){  
                var inhalt = document.createTextNode(array[y]);  
                var spalte = document.createElement("th");  
                spalte.appendChild(inhalt);  
                zeile.appendChild(spalte);  
            }  
        tableBody.appendChild(zeile);  
    }  
  
    for( var x = rowStart; x < rowStart+1; x++){  
        var zeile = document.createElement( "tr" );  
        zeile.id = "tr_"+x;  
            for(var y = 0; y < array.length; y++){  
  
                var inhalt = document.createElement("input");  
                var str = array[y] + "_" + x;  
                inhalt.setAttribute("onblur", "init(this," + x +");");  
                inhalt.name = str;  
                //alert(inhalt.name + " = " + str);  
                inhalt.id   = str;  
                inhalt.size = 8;  
                var spalte = document.createElement("td");  
                spalte.appendChild(inhalt);  
                inhalt.parentNode.innerHTML = inhalt.parentNode.innerHTML;  
                zeile.appendChild(spalte);  
  
            }  
        tableBody.appendChild(zeile);  
    }  
}

Der Rest dürfte keine Rolle spielen.
Gruß,
Philipp

[molily]

Hallo,

var inhalt = document.createElement("input");
                var str = array[y] + "_" + x;
                inhalt.setAttribute("onblur", "init(this," + x +");");

Das wird auch nicht browserübergreifend funktionieren.

So geht das Registrieren von Event-Handlern:

Schema: element.onevent = funktionsreferenz;

Hier entweder:

inhalt.x = x; // Wert am Element speichern  
inhalt.onblur = function () {  
   init(this, this.x); // Und hier wieder auslesen  
};

Oder dasselbe wie in einem Code, eine Funktion erzeugen mit dem zusammengebauten Quellcode:

inhalt.onblur = new Function("init(this, " + x + ");");

Wichtig ist, dass es ein Funktionsobjekt und kein direkter String ist! Sonst geht es nicht im IE.

inhalt.parentNode.innerHTML = inhalt.parentNode.innerHTML;

Was bezweckt diese Zeile?

Wie gesagt ist die proprietäre createElement-Syntax für den IE nötig, wenn du willst, dass das name-Attribut in innerHTML auftaucht.

Durch dieses Überschreiben von innerHTML geht das zuvor gesetzte name-Attribut verloren.

Mathias

[molily]

Wieso das form?

http://de.selfhtml.org/javascript/objekte/elements.htm#form

Mathias

[molily]

Hallo,

var inhalt = document.createElement("input");
                inhalt.setAttribute("name", array[y] + "_" + x);

Selbst wenn du auf setAttribute verzichtest, was ich dir ebenfalls raten würde, geht das, wie Cybaer gesagt hat, im IE 6 nicht.

Für das Archiv hier nochmal die Erklärung und die Möglichkeiten:

Das name-Attribut lässt sich zur Laufzeit nicht ändern, nur zum Zeitpunkt des Erzeugens des Elements setzen. IE nutzt dazu eine proprietäre Syntax für den createElement-Parameter, die in anderen Browsern zu einem Fehler führt.

var elem;  
try {  
   elem = document.createElement("<input name='bla'>");  
} catch (e) {  
   elem = document.createElement("input");  
   elem.name = "bla";  
}

var elem;  
if (/*@cc_on!@*/false) {  
   elem = document.createElement("<input name='bla'>");  
} else {  
   elem = document.createElement("input");  
   elem.name = "bla";  
}

Cybaer hat eine Funktion verlinkt, die einem das abnimmt und immer ein Element zurückgibt, bei dem auch das name-Attribut korrekt gesetzt ist.

Mathias

[Struppi]

Selbst wenn du auf setAttribute verzichtest, was ich dir ebenfalls raten würde, geht das, wie Cybaer gesagt hat, im IE 6 nicht.

Doch das geht. Das ist ja was mich an der Frage verwundert, die elder werden durchaus abgeschickt auch mit den Namen, man kann nur nicht über document.forms auf sie zugreifen.

Struppi.

[molily]

Hallo,

die Felder werden durchaus abgeschickt auch mit den Namen, man kann nur nicht über document.forms auf sie zugreifen.

Faszinierend. Du hast recht.
createElement("<input name='...'>") ist also nur nötig, wenn man das Attribut in innerHTML braucht oder über Collections (document.forms, getElementsByName) auf das Feld zugreifen will (gibt sicher noch weitere Fälle). Das wusste ich nicht.

Mathias

[Struppi]

die Felder werden durchaus abgeschickt auch mit den Namen, man kann nur nicht über document.forms auf sie zugreifen.

Faszinierend. Du hast recht.

und das hatte ich schon vor 3 Tagen gesagt. Ich war mir nämlich auch nicht sicher, hatte das aber so im Hinterkopf, hab es daher ausprobiert. Zuerst nur in dem ich get statt post verwendet habe und hab heute noch mal ein Beispiel mit get gebaut. Die dynamischen Felder werden korrekt übertragen, deshalb muss Phillip etwas anderes (falsch) machen als er uns hier erzählt.

Struppi.

[Cybaer]

Hi,

Mein Problem nun ist, das im Internet Explorer wenn ich das submitte, auf der nächsten Seite einfach nichts übermittelt wurde.

Ein bekannter Bug. Der IE braucht eine proprietäre Syntax (s. z.B. http://Coding.binon.net/createElement).

Gruß, Cybaer

[philba]

Hi,

Mein Problem nun ist, das im Internet Explorer wenn ich das submitte, auf der nächsten Seite einfach nichts übermittelt wurde.

Ein bekannter Bug. Der IE braucht eine proprietäre Syntax (s. z.B. http://Coding.binon.net/createElement).

Gruß, Cybaer

Hallo Cybaer,

du meinst sicher diesen Ausschnitt:

  
  /*@cc_on  
  @if(@_jscript)  
   // Elemente mit NAME-Attribut brauchen im IE eine spezielle Syntax (z.B. '<input name="email">')  
   if(nameattrib) {  
    tagname='<'+tagname+' name="'+nameattrib+'">'+((('|meta|link|img|input|frame|param|').indexOf('|'+tagname+'|')>=0)?'':('</'+tagname+'>'));  
    nameattrib="";  
   }  
  @end @*/  

Also brauch der IE ein Name-Attribut. Aber was schreibt er zwischen die tags? Den Teil verstehe ich nicht.

[molily]

Hallo,

/@cc_on
  @if(@_jscript)
   // Elemente mit NAME-Attribut brauchen im IE eine spezielle Syntax (z.B. '<input name="email">')
   if(nameattrib) {
    tagname='<'+tagname+' name="'+nameattrib+'">'+((('|meta|link|img|input|frame|param|').indexOf('|'+tagname+'|')>=0)?'':('</'+tagname+'>'));
    nameattrib="";
   }
  @end @/

>   
> Also brauch der IE ein Name-Attribut. Aber was schreibt er zwischen die tags?  
  
Zwischen die Tags gar nichts Er fragt ab, ob der Elementname gleich meta, link, img, input, frame oder param ist (also ob es sich um ein standardmäßig leeres Element handelt). Wenn ja, hängt er einen leeren String an, wenn nicht, dann hängt er noch ein schließenden Tag an.  
  
Ergebnis ist z.B.  
<input name="bla">  
<img name="bla">  
aber  
<textarea name="bla"></textarea>  
<button name="bla"></button>  
  
Mathias

-- 
[SELFHTML aktuell Weblog](http://aktuell.de.selfhtml.org/weblog/)

[Struppi]

Mein Problem nun ist, das im Internet Explorer wenn ich das submitte, auf der nächsten Seite einfach nichts übermittelt wurde.

Das kann ich nicht nachvollziehen. Stell mal die Übertragungsmethode auf 'get', dann siehst du dass auch die dynamisch eingefügten Felder übertragen werden.

es sei denn du benutzt irgendwelche dynamischen Funktionen um den Request zusammen zu bauen, dann tritt das hier bereits Gesagte ein.

Struppi.

[philba]

Das kann ich nicht nachvollziehen. Stell mal die Übertragungsmethode auf 'get', dann siehst du dass auch die dynamisch eingefügten Felder übertragen werden.

Diese werden ja im FF übertragen.

[Struppi]

Diese werden ja im FF übertragen.

und im IE.

Struppi.

[philba]

So, habe den Fehler gefunden.

Probleme machte meine setAttribute() funktionen. Diese funktionieren im IE nicht wie gewünscht.

Daher bin ich einfach hingegangen und hab im createElement das name attribute mitgegeben.

Nun gehts.

Danke für die Tips + Hilfe.

Grüße,
Philipp

[Struppi]

Nun gehts.

Aber nur im IE, es sei denn du machst das mittels Conditional Compilation oder mit try

Struppi.