dynamisch erstelltes Formular sendet keinen string

[elvirus]

Hallo liebe Experten,

hoffe, jemand von Euch kennt sich aus und kann mir bei meinem Problem helfen. Nach tagelanger Suche und Bastelarbeit komme ich jetzt nicht mehr weiter.

Problembeschreibung:

Gegeben:

html-Seite mit einer Tabelle, die hat eine id "tabelle" und fünf Zellen, darin im Wesentlichen ein Formular, ein Dateibrowserfeld und ein Submitbutton.

Code:
<table width="620" bgcolor="#414F72" border="0" cellspacing="4" cellpadding="0" align="center">
<tbody id="tabelle">
(...)
 <tr align="center" valign="middle">
  <form name="bild1gross" enctype="multipart/form-data" action="objekt_neu_bilder_upload.php?id=<?php echo($id); ?>&name=objekt<?php echo($id); ?>gr01&zahl=1&param=gross" method="post" target="ftp" onSubmit="window.open('','ftp','width=250,height=125');">
  <input type="hidden" name="MAX_FILE_SIZE" value="3000000">
  <td width="120" height="20" class="cmsMedium"><p>Aufl&ouml;sung:<br>320 x 240</p></td>
  <td width="40" height="20" class="cmsFormBildObjekte"><img src=<?php if(file_exists("../images_objekte/objekt".$id."gr01.jpg")) {echo('"../images_objekte/objekt'.$id.'gr01.jpg?'.$datum.$zeit.'"');} else {echo('"../images_objekte/keinbild.jpg"');} ?> name="Bild1gross" alt="F&uuml;r einwandfreie Darstellung bitte Aufl&ouml;sung beachten!" width="40" height="30"> </img></td>
  <td height="20" align="left"><input name="datei" type="file" class="cmsFormBildObjekte" id="datei" size="42" maxlength="255"></td>
  <td height="20"><input name="bildgrossUp" type="submit" class="cmsFormButton" id="bildgrossUp" value="hochladen"></td>
  <td height="20" align="left"></td>
  </form>
 </tr>
</tbody>
</table>

Dieses Formular funktioniert auch. Wenn man den button drückt, wird der Inhalt des file-Input-Feldes an das onSubmit-Fenster geschickt.

Zur Erläuterung: Es handelt sich hier um eine Bilder-Uploadseite für Objekte einer Datenbank. Da verschiedene Objekte nun auch verschieden viele Bilder haben können, habe ich versucht, per javaScript der Tabelle mit document.getElementById("tabelle") weitere Zeilen einzufügen. Dabei wollte ich die html-dom-Struktur von oben möglichst exakt nachbilden.

Code:
<script type="text/javascript">

function setRows(id,bilder) {
 var picString = '';
 var objektId = id;
 var anzahlbilder = bilder;
 var table = document.getElementById("tabelle");
 for (i=2;i<=anzahlbilder;i++) {
  if (i<10) picString = "0"+i;
  else picString = ""+i;
  var row = document.createElement('tr');
  row.align = 'center';
  row.valign = 'middle';

// form
  var formular = document.createElement('form');
  formular.name = 'bild'+i+'gross';
  formular.enctype = 'multipart/form-data';
  if (i<10) formular.action = 'objekt_neu_bilder_upload.php?id=<?php echo($id); ?>&name=objekt<?php echo($id); ?>gr0'+i+'&zahl='+i+'&param=gross';
  else formular.action = 'objekt_neu_bilder_upload.php?id=<?php echo($id); ?>&name=objekt<?php echo($id); ?>gr'+i+'&zahl='+i+'&param=gross';
  formular.method = 'post';
  formular.target = 'ftp';
  formular.onsubmit = function() {
   window.open("","ftp","width=250,height=125");
  }
  var hidden = document.createElement('input');
  hidden.type = 'hidden';
  hidden.name = 'MAX_FILE_SIZE';
  hidden.value = '3000000';

table.appendChild(row);
  row.appendChild(formular);
  formular.appendChild(hidden);

// 1st td
  var style = document.createAttribute("class");
  style.nodeValue = "cmsMedium";
  var cell_1 = document.createElement('td');
  cell_1.width = '120';
  cell_1.height = '20';

cell_1.setAttributeNode(style);
  formular.appendChild(cell_1);

// 2nd td
  var style2 = document.createAttribute("class");
  style2.nodeValue = "cmsFormBildObjekte";
  var cell_2 = document.createElement('td');
  cell_2.width = '40';
  cell_2.height = '20';
  cell_2.setAttributeNode(style2);
  var pic = document.createElement('img');
  pic.src = '../images_objekte/objekt'+objektId+'gr'+picString+'.jpg';
  pic.name = 'Bild'+i+'gross';
  pic.alt = 'Für einwandfreie Darstellung bitte Auflösung beachten!';
  pic.width = '40';
  pic.height = '30';

cell_2.appendChild(pic);
  formular.appendChild(cell_2);

// 3rd td
//<td height="20" align="left"><input name="datei" type="file" class="cmsFormBildObjekte" id="datei" size="42" maxlength="255"></td>
  var style3 = document.createAttribute("class");
  style3.nodeValue = "cmsFormBildObjekte";
  var cell_3 = document.createElement('td');
  cell_3.height = '20';
  cell_3.align = 'left';
  var input = document.createElement('input');
  input.setAttributeNode(style3);
  input.name = 'datei';
  input.type = 'file';
  input.id = 'datei';
  input.size = '42';
  input.maxlength = '255';

cell_3.appendChild(input);
  formular.appendChild(cell_3);

// 4th td
//<td height="20"><input name="bildgrossUp" type="submit" class="cmsFormButton" id="bildgrossUp" value="hochladen"></td>
  var style4 = document.createAttribute("class");
  style4.nodeValue = "cmsFormButton";
  var cell_4 = document.createElement('td');
  cell_4.height = '20';
  var input2 = document.createElement('input');
  input2.setAttributeNode(style4);
  input2.name = 'bildgrossUp';
  input2.type = 'submit';
  input2.id = 'bildgrossUp';
  input2.value = 'hochladen';

cell_4.appendChild(input2);
  formular.appendChild(cell_4);

// 5th td
//<td height="20" align="left"></td>
  var cell_5 = document.createElement('td');
  cell_5.height = '20';
  cell_5.align = 'left';

formular.appendChild(cell_5);
 }
}
</script>

Folgendes Ergebnis:
Bin mir grad bei Firefox nicht sicher, aber bisher verhielten sich IE und Firefox gleich. Die zusätzlichen Zeilen werden per Schleife ordnungsgemäß generiert, die richtigen Bilder werden geladen, die Tabelle sieht hübsch aus, laut dom-inspector sind alle Formulare vorhanden. Die buttons funktionieren, mit onSubit werden kleine Fenster geöffnet, die die in action angegebene Adresse aufsuchen.
Aber die dynamisch erzeugten Formulare geben keine POST-Variablen weiter.

Ich hoffe, jemand durchschaut das ganze hier überhaupt...
Den link kann ich leider nicht veröffentlichen, aber wenn einer wirklich helfen will, kann ich ihn per mail verschicken.

Gruß und Dank,
elvirus

[plan_B]

Hallo,

dieses javascript/php-Mischmasch ist leider wenig aussagekräftig.

...
  if (i<10) formular.action = 'objekt_neu_bilder_upload.php?id=<?php echo($id); ?>&name=objekt<?php echo($id); ?>gr0'+i+'&zahl='+i+'&param=gross';
  else formular.action = 'objekt_neu_bilder_upload.php?id=<?php echo($id); ?>&name=objekt<?php echo($id); ?>gr'+i+'&zahl='+i+'&param=gross';
  formular.method = 'post';

ist dir der Unterschied zwischen "post" und "get" klar?
http://de.selfhtml.org/html/formulare/definieren.htm

Gruß plan_B

[elvirus]

if (i<10) formular.action = 'objekt_neu_bilder_upload.php?id=<?php echo($id); ?>&name=objekt<?php echo($id); ?>gr0'+i+'&zahl='+i+'&param=gross';
  else formular.action = 'objekt_neu_bilder_upload.php?id=<?php echo($id); ?>&name=objekt<?php echo($id); ?>gr'+i+'&zahl='+i+'&param=gross';
  formular.method = 'post';

ist dir der Unterschied zwischen "post" und "get" klar?
http://de.selfhtml.org/html/formulare/definieren.htm

Hallo Plan_B,

sorry, dass ich den Code nicht genauer beschrieben habe. Also, ich versende mit dem angegebenen URL in der action Variablen per GET, das soll so sein, funktioniert auch statisch ganz gut. Dort sind die Daten für den neuen Dateinamen. Das mit der if-Abfrage resultiert aus einer unschönen Konvention, die ich irgendwann am Anfang getroffen habe, das werde ich später bereinigen.
Weiter unten kommt ein input-tag, welches per POST an den action-URL übersendet werden soll. Und genau das klappt nur in der statischen Variante. Das dynamisch generierte input wird ignoriert...aber der button macht genau, was er machen soll.

Ich schau mir die Definitionen gern nochmal an...

Grüße,
elvirus

[plan_B]

Hallo,

Weiter unten kommt ein input-tag, welches per POST an den action-URL übersendet werden soll. Und genau das klappt nur in der statischen Variante. Das dynamisch generierte input wird ignoriert...

funktioniert es nur im IE nicht oder mit keinem Browser?

Gruß plan_B

[elvirus]

funktioniert es nur im IE nicht oder mit keinem Browser?

Im IE wird alles angezeigt und das formular funktioniert wie gesagt. Im Firefox war es bis jetzt auch so.
Seit der letzten Änderung zeigt er aber die generierten Zeilen nicht mehr an. Der DOM-Inspector zeigt mir aber die komplette Hierarchie mit form, input, td tags.

Ich habe irgendwie die Hierarchie vermurkst, glaube ich. Aber ich finde keinen Ansatzpunkt für die Lösung.

Wie müsste ich
<tr>
 <form>
  <input>
  <td>
   ...
</tr>
hierarchisch exakt abbilden?

Ich habs versucht mit
row = document.createElement('tr');
formular = document.createElement('form');
cell_1 = document.createElement('td');
...

und dann
table = document.getElementById('tabelle');
table.appendChild(row);
row.appendChild(formular);
formular.appendChild(cell_1);
formular.appendChild(cell_2);
...

Hilft Dir das weiter?

elvirus

[elvirus]

<tr>
  <form>
   <input type='hidden'>
   <td>
    <input type='file'>
   </td>
   <td>
    <input type='submit'>
   </td>
  </form>
</tr>

Weiß jemand, wie die korrekte createElement- und appendChild-Reihenfolge für die oben beschriebene Hierarchie auszusehen hat?

Für einen Denkanstoß wäre ich sehr dankbar,
elvirus

[elvirus]

Danke Sehr!

Habe jetzt doch nochmal hinzugefügt:

Code:
// <tbody>
  newtbody = document.createElement('tbody');
  newtbody.id = 'tbody'+i;

// und Anhängen geändert:
// erzeugte Komponenten anhängen
  cell_1.appendChild(hidden);
  cell_2.appendChild(pic);
  cell_3.appendChild(input);
  cell_4.appendChild(input2);
  row.appendChild(cell_1);
  row.appendChild(cell_2);
  row.appendChild(cell_3);
  row.appendChild(cell_4);
  row.appendChild(cell_5);
  newtbody.appendChild(row);      //<<hier
  newtable.appendChild(newtbody); //<<und hier
  formular.appendChild(newtable);
  insert.appendChild(formular);

Seitdem klappts im IE und FF und alles ist cool!

Es lag also daran, dass eine gesamte Tabelle Kind des Formulaars sein muss und dass ich für IE zusätzlich einen tbody UND eine id erstellen muss.

Vielen Dank! Problem gelöst.

elvirus

[elvirus]

Vielen Dank! Problem gelöst.

Doch nicht!

Ich frage mich, was der dumme Internet Explorer für ein Problem hat!!!
Firefox macht alles schön! Aber mein Kunde benutzt IE und wird nicht umstellen! Der IE allerdings stellt zwar alles wunderbar dar, aber sendet wieder den String aus dem input-file-Feld nicht weg.

Bitte bitte, wer findet den Teil in meinem javaScript Code, der nicht IE-Konform ist, speziell im markierten Bereich?

Code (aktuell):
<script type="text/javascript">

function setRows(id,bilder) {
 var picString = '';
 var objektId = id;
 var anzahlbilder = bilder;
 var insert = document.getElementById("insert");

// Beginn der Schleife
// ab hier werden 'anzahlbilder-1' viele einzeilige Tabellen erzeugt
 for (i=2;i<=anzahlbilder;i++) {
  if (i<10) picString = "0"+i;
  else picString = ""+i;
// <table width="620" bgcolor="#414F72" border="0" cellspacing="4" cellpadding="0" align="center">
  var newtable = document.createElement('table');
  newtable.width = '620';
  newtable.bgcolor = '#414F72';
  newtable.border = '0';
  newtable.cellspacing = '4';
  newtable.cellpadding = '0';
  newtable.align = 'center';

// <tr>
  var row = document.createElement('tr');
  row.align = 'center';
  row.valign = 'middle';

// <form>
  var formular = document.createElement('form');
  formular.name = 'bild'+i+'gross';
  formular.enctype = 'multipart/form-data';
  if (i<10) formular.action = 'objekt_neu_bilder_upload.php?id='+objektId+'&name=objekt'+objektId+'gr0'+i+'&zahl='+i+'&param=gross';
  else formular.action = 'objekt_neu_bilder_upload.php?id='+objektId+'&name=objekt'+objektId+'gr'+i+'&zahl='+i+'&param=gross';
  formular.method = 'post';
  formular.target = 'ftp';
  formular.onsubmit = function() {
   window.open("","ftp","width=250,height=125");
  }

// 1st <td>
  var cell_1 = document.createElement('td');
  cell_1.className = "cmsMedium";
  cell_1.width = '120';
  cell_1.height = '20';
  var hidden = document.createElement('input');
  hidden.type = 'hidden';
  hidden.name = 'MAX_FILE_SIZE';
  hidden.value = '3000000';

// 2nd <td>
  var cell_2 = document.createElement('td');
  cell_2.className = "cmsFormBildObjekte";
  cell_2.width = '40';
  cell_2.height = '20';
  var pic = document.createElement('img');
  pic.src = '../images_objekte/objekt'+objektId+'gr'+picString+'.jpg';
  pic.name = 'Bild'+i+'gross';
  pic.alt = 'Für einwandfreie Darstellung bitte Auflösung beachten!';
  pic.width = '40';
  pic.height = '30';

// 3rd <td>
// <td height="20" align="left"><input name="datei" type="file" class="cmsFormBildObjekte" id="datei" size="42" maxlength="255"></td>
  var cell_3 = document.createElement('td');
  cell_3.height = '20';
  cell_3.align = 'left';

// Markierter Bereich ab hier:
// Der Inhalt dieses Feldes soll per 'POST' verschickt werden!!!
  var input = document.createElement('input');
  input.className = "cmsFormBildObjekte";
  input.name = 'datei';
  input.type = 'file';
  input.id = 'datei';
  input.size = '42';
  input.maxlength = '255';
// bis hier.

// 4th <td>
// <td height="20"><input name="bildgrossUp" type="submit" class="cmsFormButton" id="bildgrossUp" value="hochladen"></td>
  var cell_4 = document.createElement('td');
  cell_4.height = '20';
  var input2 = document.createElement('input');
  input2.className = "cmsFormButton";
  input2.name = 'bildgrossUp';
  input2.type = 'submit';
  input2.id = 'bildgrossUp';
  input2.value = 'hochladen';

// 5th <td>
// <td height="20" align="left"></td>
  var cell_5 = document.createElement('td');
  cell_5.height = '20';
  cell_5.align = 'left';

// <tbody>
  newtbody = document.createElement('tbody');
  newtbody.id = 'tbody'+i;

// erzeugte Komponenten anhängen
  cell_1.appendChild(hidden);
  cell_2.appendChild(pic);
  cell_3.appendChild(input);
  cell_4.appendChild(input2);
  row.appendChild(cell_1);
  row.appendChild(cell_2);
  row.appendChild(cell_3);
  row.appendChild(cell_4);
  row.appendChild(cell_5);
  newtbody.appendChild(row);
  newtable.appendChild(newtbody);
  formular.appendChild(newtable);
  insert.appendChild(formular);
 }
}
</script>

elvirus

[plan_B]

moin, moin

Ich frage mich, was der dumme Internet Explorer für ein Problem hat!!!
Firefox macht alles schön!

Wenn du geprüft hast, dass dein Script in jedem Browser läuft, kannst du dich dem IE zuwenden. Hatte dir dazu schon mal einen Link gegeben.

der IE (nur der IE) möchte es so haben:

  
var input=document.createElement('input name="datei" type="file" class="cmsFormBildObjekte" id="datei" size="42" maxlength="255"');  

oder mit Browserweiche:

  
// conditional compilation  
/*@cc_on @*/  
/*@if (@_jscript)  
  var input=document.createElement('"input name="datei" type="file" ...')  
  @else @*/  
  var input=document.createElement("input")  
  input.name="datei";  
  input.type="file";  
/*@end @*/  

zu dem Thema findet man unzählige Threads hier im Archiv.

Gruß plan_B

[elvirus]

plan_B, Du bist mein Mann!

Danke, dass Du es schaffst, mir immer wieder neue Ansätze zu liefern. Ich finde zu diesem Thema wirklich nicht viel, auch nicht hier im Forum. Wahrscheinlich wähle ich die Suchbegriffe nicht gut genug.

Ich werde Deine Tipps gleich ausprobieren und mich nochmal melden. Klingt jedenfalls vielversprechend...

Übrigens: Die letzte Nacht habe ich mit Analyse verbracht. Dabei ist mir aufgefallen (mit dom inspector für IE), dass der IE alle gesetzten "name"-Attribute ignoriert, wenn sie nach dem Schema gesetzt wurden:
element.name='bla', oder
element.setAttribute('name','bla'), sogar
var attri=document.createAttribute('name');attri.setNodeValue('bla');element.setAttributeNode(attri);

Das generierte html-Dokument enthält alle geforderten Zeilen, allerdings haben die Elemente kein name-Attribut. Da die POST-Variablen bei mir über den Namen identifiziert werden, kann das ja dann auch nicht klappen.
Bin gespannt, ob Dein Vorschlag hilft...

Danke,
elvirus

[elvirus]

// conditional compilation
  var input=document.createElement('"input name="datei" type="file" ...')

Wow, das war der Bringer... Habe zum ersten Mal von cc gehört und mit createElement('<input name="datei"...>') hats dann geklappt!
Jetzt sendet der IE, der FF tuts immer noch, alles ist wunderbar!

:-)

zu dem Thema findet man unzählige Threads hier im Archiv.

Gruß plan_B

Habe viel gefunden, mit den richtigen Suchwörtern erleichtert man sich einiges...
Dennoch, ohne Dich hätte ich die ganze Woche mit diesem Problem verbringen müssen. Tausendundeinfacher Dank!

Gruß,
elvirus

Falls es jemanden interessiert, mein funktionierender Code (getestet unter IE7 und FF2, nicht optimiert):

<script type="text/javascript">

function setRows(id,bilder) {
 var picString = '';
 var objektId = id;
 var anzahlbilder = bilder;
 var insert = document.getElementById("insert");

// Beginn der Schleife
// ab hier werden 'anzahlbilder-1'-viele einzeilige Tabellen erzeugt, jedes ist Kind eines Formulars
 for (i=2;i<=anzahlbilder;i++) {
  if (i<10) picString = "0"+i;
  else picString = ""+i;
// <table width="620" bgcolor="#414F72" border="0" cellspacing="4" cellpadding="0" align="center">
  // conditional compilation
  /*@cc_on
  /*@if (@_jscript)
  var newtable = document.createElement('<table width="620" bgcolor="#414F72" border="0" cellspacing="4" cellpadding="0" align="center">');
  @else @*/
  var newtable = document.createElement('table');
  newtable.width = '620';
  newtable.bgcolor = '#414F72';
  newtable.border = '0';
  newtable.cellspacing = '4';
  newtable.cellpadding = '0';
  newtable.align = 'center';
  /*@end @*/

// <tr>
  // conditional compilation
  /*@cc_on
  /*@if (@_jscript)
  var row = document.createElement('<tr align="center" valign="middle">');
  @else @*/
  var row = document.createElement('tr');
  row.align = 'center';
  row.valign = 'middle';
  /*@end @*/

// <form>
  // conditional compilation
  /*@cc_on
  /*@if (@_jscript)
  var formaction = '';
  if (i<10) formaction = 'objekt_neu_bilder_upload.php?id='+objektId+'&name=objekt'+objektId+'gr0'+i+'&zahl='+i+'&param=gross';
  else formaction = 'objekt_neu_bilder_upload.php?id='+objektId+'&name=objekt'+objektId+'gr'+i+'&zahl='+i+'&param=gross';
  var formular = document.createElement('<form name="bild'+i+'gross" onSubmit="window.open('','ftp','width=250,height=125')" action="'+formaction+'" method="post" target="ftp" enctype="multipart/form-data">');
  @else @*/
  var formular = document.createElement('form');
  formular.name = 'bild'+i+'gross';
  formular.onsubmit = function() {
   window.open("","ftp","width=250,height=125");
  }
  if (i<10) formular.action = 'objekt_neu_bilder_upload.php?id='+objektId+'&name=objekt'+objektId+'gr0'+i+'&zahl='+i+'&param=gross';
  else formular.action = 'objekt_neu_bilder_upload.php?id='+objektId+'&name=objekt'+objektId+'gr'+i+'&zahl='+i+'&param=gross';
  formular.method = 'post';
  formular.target = 'ftp';
  formular.enctype = 'multipart/form-data';
  /*@end @*/

// 1st <td>
  // conditional compilation
  /*@cc_on
  /*@if (@_jscript)
  var cell_1 = document.createElement('<td class="cmsMedium" width="120" height="20">');
  var hidden = document.createElement('<input type="hidden" name="MAX_FILE_SIZE" value="3000000">');
  @else @*/
  var cell_1 = document.createElement('td');
  cell_1.className = "cmsMedium";
  cell_1.width = '120';
  cell_1.height = '20';
  var hidden = document.createElement('input');
  hidden.type = 'hidden';
  hidden.name = 'MAX_FILE_SIZE';
  hidden.value = '3000000';
  /*@end @*/

// 2nd <td>
  // conditional compilation
  /*@cc_on
  /*@if (@_jscript)
  var cell_2 = document.createElement('<td class="cmsFormBildObjekte" width="40" height="20">');
  var pic = document.createElement('<img src="../images_objekte/objekt'+objektId+'gr'+picString+'.jpg" name="Bild'+i+'gross" alt="Für einwandfreie Darstellung bitte Auflösung beachten!" width="40" height="30">');
  @else @*/
  var cell_2 = document.createElement('td');
  cell_2.className = "cmsFormBildObjekte";
  cell_2.width = '40';
  cell_2.height = '20';
  var pic = document.createElement('img');
  pic.src = '../images_objekte/objekt'+objektId+'gr'+picString+'.jpg';
  pic.name = 'Bild'+i+'gross';
  pic.alt = 'Für einwandfreie Darstellung bitte Auflösung beachten!';
  pic.width = '40';
  pic.height = '30';
  /*@end @*/

// 3rd <td>
// <td height="20" align="left"><input name="datei" type="file" class="cmsFormBildObjekte" size="42" maxlength="255"></td>
  // conditional compilation
  /*@cc_on
  /*@if (@_jscript)
  var cell_3 = document.createElement('<td height="20" align="left">');
  var input = document.createElement('<input name="datei" type="file" class="cmsFormBildObjekte" size="42" maxlength="255">');
  @else @*/
  var cell_3 = document.createElement('td');
  cell_3.height = '20';
  cell_3.align = 'left';
  var input = document.createElement('input');
  input.className = "cmsFormBildObjekte";
  input.name = 'datei';
  input.type = 'file';
  input.size = '42';
  input.maxLength = '255';
  /*@end @*/

// 4th <td>
// <td height="20"><input name="bildgrossUp" type="submit" class="cmsFormButton" id="bildgrossUp" value="hochladen"></td>
  // conditional compilation
  /*@cc_on
  /*@if (@_jscript)
  var cell_4 = document.createElement('<td height="20">');
  var button = document.createElement('<input class="cmsFormButton" name="bildgrossUp" type="submit" value="hochladen">');
  @else @*/
  var cell_4 = document.createElement('td');
  cell_4.height = '20';
  var button = document.createElement('input');
  button.className = "cmsFormButton";
  button.name = 'bildgrossUp';
  button.type = 'submit';
  button.value = 'hochladen';
  /*@end @*/

// 5th <td>
// <td height="20" align="left"></td>
  // conditional compilation
  /*@cc_on
  /*@if (@_jscript)
  var cell_5 = document.createElement('<td height="20" align="left">');
  @else @*/
  var cell_5 = document.createElement('td');
  cell_5.height = '20';
  cell_5.align = 'left';
  /*@end @*/

// <tbody für IE>
  // conditional compilation
  /*@cc_on
  /*@if (@_jscript)
  var newtbody = document.createElement('<tbody id="tbody'+i+'">');
  @else @*/
  newtbody = document.createElement('tbody');
  newtbody.id = 'tbody'+i;
  /*@end @*/

// erzeugte Komponenten anhängen
  cell_1.appendChild(hidden);
  cell_2.appendChild(pic);
  cell_3.appendChild(input);
  cell_4.appendChild(button);
  row.appendChild(cell_1);
  row.appendChild(cell_2);
  row.appendChild(cell_3);
  row.appendChild(cell_4);
  row.appendChild(cell_5);
  newtbody.appendChild(row);
  newtable.appendChild(newtbody);
  formular.appendChild(newtable);
  insert.appendChild(formular);
 }
}
</script>

Die Funktion setRows(id, anzahlbilder) wird im body der Seite aufgerufen und hängt anzahlbilder-viele Formulare an eine mit der id"insert" gekennzeichnete Stelle im Dokument.
Die übergebene id kennzeichnet das Datenbankobjekt, zu dem man auf dieser Seite hochgeladene Bilder ändern kann.
Da ein Objekt laut Konvention unterschiedlich viele Bilder besitzen kann, werden also entsprechend viele Tabellen generiert, für jedes Bild eine, in denen eine verkleinerte Vorschau der entsprechenden Bilder zu sehen ist.

Durch diesen Codeschnipsel funktioniert das Modul nun endlich. Es ist Teil eines CMS für den Relaunch einer bestehenden Seite eines Bau- und Planungsunternehmens. Nun arbeiten flash-mySQL-php-html-javaScript endlich perfekt zusammen und meine Arbeit an der Datenbank-Filesystem-Konsistenz ist endlich beendet!

Klasse Forum,
Liebe Grüße,
elvirus

[plan_B]

Hallo,

denke gar so kompliziert hätte dein  Scriot nicht werden brauchen.

die Browserweiche ist nur dann notwendig, wenn Elemente mit Name-Attribut oder Input-Elemente, die nicht vom Typ Text sind, dynamisch erzeugt werden sollen.

für INPUT könnte man die Browserweiche so kapseln.

  
function create_input(name,typ)  
{  
/*@cc_on @*/  
/*@if (@_jscript)  
  var ele=document.createElement('<input name="'+name+'" type="'+typ+'">')  
  @else @*/  
  var ele=document.createElement('input');  
  ele.name=name;  
  ele.type=typ;  
/*@end @*/  
  
return ele;  
}  
  
var input = create_input("datei","file");  
  input.className = "cmsFormBildObjekte";  
  input.size = '42';  
  input.maxLength = '255';  
  

damit würde der Code wieder pflegeleichter, weil Doppeltgemoppeltes wegfällt.

im übrigen gibt es für das http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table@title=table-Element weitere Methoden: insertRow(), insertCell()

Gruß plan_B

[plan_B]

Hallo,

funktioniert es nur im IE nicht oder mit keinem Browser?

Im IE wird alles angezeigt und das formular funktioniert wie gesagt. Im Firefox war es bis jetzt auch so.

ich hätte vermutet, dass es im IE gerade nicht funktioniert:
createelement

Seit der letzten Änderung zeigt er aber die generierten Zeilen nicht mehr an. Der DOM-Inspector zeigt mir aber die komplette Hierarchie mit form, input, td tags.

Ich habe irgendwie die Hierarchie vermurkst, glaube ich. Aber ich finde keinen Ansatzpunkt für die Lösung.

Wie müsste ich
<tr>
<form>
  <input>
  <td>
   ...
</tr>
hierarchisch exakt abbilden?

bei mir sähe es eher so aus:

  
<form>  
<table>  
<tbody>  
<tr>  
<td>  
  <input> ..  
</td>  
</tr>  
</tbody>  
</table>  
</form>  

// 1st td
  var style = document.createAttribute("class");
  style.nodeValue = "cmsMedium";
  var cell_1 = document.createElement('td');
  cell_1.width = '120';
  cell_1.height = '20';

wäre so einfacher

  
  var cell_1 = document.createElement('td');  
  cell_1.width = '120';  
  cell_1.height = '20';  
  cell_1.style.className="cmsMedium";  

Gruß plan_B

[plan_B]

Hallo,

// 1st td
  var style = document.createAttribute("class");
  style.nodeValue = "cmsMedium";
  var cell_1 = document.createElement('td');
  cell_1.width = '120';
  cell_1.height = '20';

wäre so einfacher

var cell_1 = document.createElement('td');
  cell_1.width = '120';
  cell_1.height = '20';
  cell_1.style.className="cmsMedium";

muss natürlich so heissen:

cell_1.className="cmsMedium";

  
Gruß plan\_B

-- 
     \*®\*´¯`·.¸¸.·

[elvirus]

Danke!

Habe wieder einen Ansatz! werde versuchen, ganze Tabellen zu generieren, vielleicht kommt was bei raus. Melde mich.

Vielen Dank für den Hinweis mit className(!!) Danach habe ich lange vergeblich gesucht.

Grüße,
elvirus

[elvirus]

Also, habe mein Script nun umgeschrieben. Dank Eurer Hilfe funktioniert es jetzt unter Firefox. Nur IE macht jetzt Probleme. Aber es muss leider unter IE funktionieren, FF spielt hier gar keine Geige.
Ich habe ein bissel mit tbody rumprobiert, kam aber zu keinem neuen Ergebnis. Der IE stellt leere Tabellen dar, man sieht also an der Lücke, dass er die dynamischen Tabellen erzeugt und eingefügt hat, leider ohne Inhalte. Firefox macht das toll und mich damit unglaublich glücklich.
Vielleicht jemand noch ne Idee?

Mein Code:
<script type="text/javascript">

function setRows(id,bilder) {
 var picString = '';
 var objektId = id;
 var anzahlbilder = bilder;
 var insert = document.getElementById("insert");

// Beginn der Schleife
// ab hier werden 'anzahlbilder-1' viele einzeilige Tabellen erzeugt
 for (i=2;i<=anzahlbilder;i++) {
  if (i<10) picString = "0"+i;
  else picString = ""+i;

// <table width="620" bgcolor="#414F72" border="0" cellspacing="4" cellpadding="0" align="center">
  var newtable = document.createElement('table');
  newtable.width = '620';
  newtable.bgcolor = '#414F72';
  newtable.border = '0';
  newtable.cellspacing = '4';
  newtable.cellpadding = '0';
  newtable.align = 'center';

// <tr>
  var row = document.createElement('tr');
  row.align = 'center';
  row.valign = 'middle';

// <form>
  var formular = document.createElement('form');
  formular.name = 'bild'+i+'gross';
  formular.enctype = 'multipart/form-data';
  if (i<10) formular.action = 'objekt_neu_bilder_upload.php?id='+objektId+'&name=objekt'+objektId+'gr0'+i+'&zahl='+i+'&param=gross';
  else formular.action = 'objekt_neu_bilder_upload.php?id='+objektId+'&name=objekt'+objektId+'gr'+i+'&zahl='+i+'&param=gross';
  formular.method = 'post';
  formular.target = 'ftp';
  formular.onsubmit = function() {
   window.open("","ftp","width=250,height=125");
  }

// 1st <td>
  var cell_1 = document.createElement('td');
  cell_1.className = "cmsMedium";
  cell_1.width = '120';
  cell_1.height = '20';
  var hidden = document.createElement('input');
  hidden.type = 'hidden';
  hidden.name = 'MAX_FILE_SIZE';
  hidden.value = '3000000';

// 2nd <td>
  var cell_2 = document.createElement('td');
  cell_2.className = "cmsFormBildObjekte";
  cell_2.width = '40';
  cell_2.height = '20';
  var pic = document.createElement('img');
  pic.src = '../images_objekte/objekt'+objektId+'gr'+picString+'.jpg';
  pic.name = 'Bild'+i+'gross';
  pic.alt = 'Für einwandfreie Darstellung bitte Auflösung beachten!';
  pic.width = '40';
  pic.height = '30';

// 3rd <td>
//<td height="20" align="left"><input name="datei" type="file" class="cmsFormBildObjekte" id="datei" size="42" maxlength="255"></td>
  var cell_3 = document.createElement('td');
  cell_3.height = '20';
  cell_3.align = 'left';
  var input = document.createElement('input');
  input.className = "cmsFormBildObjekte";
  input.name = 'datei';
  input.type = 'file';
  input.id = 'datei';
  input.size = '42';
  input.maxlength = '255';

// 4th <td>
//<td height="20"><input name="bildgrossUp" type="submit" class="cmsFormButton" id="bildgrossUp" value="hochladen"></td>
  var cell_4 = document.createElement('td');
  cell_4.height = '20';
  var input2 = document.createElement('input');
  input2.className = "cmsFormButton";
  input2.name = 'bildgrossUp';
  input2.type = 'submit';
  input2.id = 'bildgrossUp';
  input2.value = 'hochladen';

// 5th <td>
//<td height="20" align="left"></td>
  var cell_5 = document.createElement('td');
  cell_5.height = '20';
  cell_5.align = 'left';

// Einhängen der Komponenten
  cell_1.appendChild(hidden);
  cell_2.appendChild(pic);
  cell_3.appendChild(input);
  cell_4.appendChild(input2);
  row.appendChild(cell_1);
  row.appendChild(cell_2);
  row.appendChild(cell_3);
  row.appendChild(cell_4);
  row.appendChild(cell_5);
  newtable.appendChild(row);
  formular.appendChild(newtable);
  insert.appendChild(formular);
 }
}
</script>

'insert' ist dabei ein <p>-tag mit id="insert", in welches die generierten Tabellen als child eingefügt werden, da insertBefore mir weder bei IE noch FF in verschiedenen Schreibweisen weiterhelfen konnte.

Jemand Ideen?
elvirus

[Der Martin]

Hallo,

Im IE wird alles angezeigt und das formular funktioniert wie gesagt.

das dürfte es aber eigentlich nicht. ;-)

<tr>
<form>
  <input>
  <td>
   ...
</tr>

Diese Schachtelung ist nicht erlaubt. Ein tr-Element darf als direkte Nachfahren nur td- oder th-Elemente haben. Das Formular muss also entweder die Tabelle komplett umschließen, oder komplett innerhalb einer Zelle liegen. Dazwischen gibt's nix erlaubtes.

So long,
 Martin