Probleme mit dem dynamischen Hinzufügen eines hidden-Fields

[Elminster]

Hallo allerseits,

habe ein Problem, dessen ich nicht mehr Herr werde. Es geht um folgendes:

Ich habe eine Seite auf der ein Button angeklickt wird. Dieser führt Javascript aus, welches dynamisch HTML-Code auf der Seite erzeugt. Soweit funktioniert das auch alles wunderbar, nur leider kriege ich mein Input-Feld nicht 'hidden'.

Der Quellcodeausschnitt (aus dem Javascript):
    var inputtag = document.createElement('input');
    formtag.appendChild(inputtag);
    var ieidie = document.createAttribute('id');
    ieidie.nodeValue = 'printhtml';
    inputtag.setAttributeNode(ieidie);
    var iname = document.createAttribute('name');
    iname.nodeValue = 'printhtml';
    inputtag.setAttributeNode(iname);

//Probierte Variante 1:
//    var itypus = document.createAttribute('type');
//    itypus.nodeValue = 'hidden';
//    inputtag.setAttributeNode(itypus);

//Probierte Variante 2:
//    inputtag.type = 'hidden';

//Probierte Variante 3:
//    inputtag.setAttribute('type', 'hidden');

var iwert = document.createAttribute('value');
    iwert.nodeValue = htmlSource;
    inputtag.setAttributeNode(iwert);

... formtag ist ein dynamisch eingefügtes <form>-Tag. Alle drei Varianten, die ich mir in Foren/News/Blogs usw. zusammengesucht habe, funktionieren leider garnicht und geben mir immer nur Javascriptfehler im IE6 (auf den habe ich leider keinen Einfluss).

Vielleicht hat ja jemand eine Idee, was ich da falsch mache. Mir gehen da inzwischen wirklich die Ideen aus. Wäre euch echt dankbar :)

Lieben Gruss, Elminster

[ChrisB]

Hi,

Ich habe eine Seite auf der ein Button angeklickt wird. Dieser führt Javascript aus, welches dynamisch HTML-Code auf der Seite erzeugt. Soweit funktioniert das auch alles wunderbar, nur leider kriege ich mein Input-Feld nicht 'hidden'.

var inputtag = document.createElement('input');
    formtag.appendChild(inputtag);

Die type-Eigenschaft eines input-Feldes zu ändern, nachdem es bereits ins Dokument eingehängt wurde, kann auch in anderen Browsern als dem IE problematisch sein - weil type eigentlich als read-only definiert ist.

var ieidie = document.createAttribute('id');
    ieidie.nodeValue = 'printhtml';
    inputtag.setAttributeNode(ieidie);

Dieser ganze Krempel ist unnötig, und im IE oftmals noch mal besonders problematisch.
elementReferenz.eigenschaftsname = wert;
tut's in fast allen Situationen auch - hier also bspw.
inputtag.id = "printhtml";

... formtag ist ein dynamisch eingefügtes <form>-Tag. Alle drei Varianten, die ich mir in Foren/News/Blogs usw. zusammengesucht habe, funktionieren leider garnicht und geben mir immer nur Javascriptfehler im IE6 (auf den habe ich leider keinen Einfluss).

Formularfelder dynamisch zu erzeugen ist im IE oftmals problematisch, zumindest wenn man den nach DOM "korrekten" Weg geht.

Die MSDN schlägt in der Beschreibung zu createElement eine Alternativ-Syntax vor, die im IE immer funktionieren sollte:

var newRadioButton = document.createElement("<INPUT TYPE='RADIO' NAME='RADIOTEST' VALUE='First Choice'>")

Also statt des Elementnamens gleich dessen komplettes HTML inkl. Attribute als Parameter übergeben.
Wenn du ausschliesslich für den IE 6 schreibst, kannst du es dabei belassen - sonst muss eine Browserweiche her, da andere Browser diesen Quatsch natürlich nicht akzeptieren.

MfG ChrisB

[Alexander (HH)]

Moin Moin!

Die type-Eigenschaft eines input-Feldes zu ändern, nachdem es bereits ins Dokument eingehängt wurde, kann auch in anderen Browsern als dem IE problematisch sein - weil type eigentlich als read-only definiert ist.

So weit ich mich erinnere, kann man type exakt einmal setzen, und zwar nur bei einem ganz frisch erzeugten Input-Element. D.h.

  
var inp=document.createElement("input");  
inp.type="hidden";  

Die MSDN schlägt in der Beschreibung zu createElement eine Alternativ-Syntax vor, die im IE immer funktionieren sollte:
»» var newRadioButton = document.createElement("<INPUT TYPE='RADIO' NAME='RADIOTEST' VALUE='First Choice'>")

Also statt des Elementnamens gleich dessen komplettes HTML inkl. Attribute als Parameter übergeben.
Wenn du ausschliesslich für den IE 6 schreibst, kannst du es dabei belassen - sonst muss eine Browserweiche her, da andere Browser diesen Quatsch natürlich nicht akzeptieren.

Ich meine mich zu erinnern, dass ein einfaches Try-Catch vollkommen ausreicht.

  
var inp,e;  
try {  
  inp=document.createElement('<input type="hidden">'); /* IE */  
} catch (e) {  
  inp=document.createElement('input'); /* Non-IE */  
  inp.type='hidden';  
}  
// weiter wie gehabt  

Ich habe das dann noch in eine Funktion createInput(typeValue) verpackt und entsprechend an den Parameter angepaßt.

Alexander

[Kai345]

[latex]Mae  govannen![/latex]

Ich meine mich zu erinnern, dass ein einfaches Try-Catch vollkommen ausreicht.

Ich vermeide try-catch soweit wie möglich und verwende lieber sowas:

if (/*@cc_on !@*/false) {  // IE  
  var a = document.createElement('<input type="hidden">');  
}  
else {  
  a = document.createElement('input');  
  a.type = 'hidden';  
}

Cü,

Kai

[Alexander (HH)]

Moin Moin!

»» Ich meine mich zu erinnern, dass ein einfaches Try-Catch vollkommen ausreicht.

Ich vermeide try-catch soweit wie möglich und verwende lieber sowas:

if (/@cc_on !@/false) {  // IE

var a = document.createElement('<input type="hidden">');
}
else {
  a = document.createElement('input');
  a.type = 'hidden';
}

  
Das impliziert, dass die Conditional Comments und die erweiterte Form von document.createElement() immer gleichzeitig vorkommen. try-catch macht diese Annahme nicht und kommt auch mit Browsern klar, die sich hinsichtlich document.createElement() wie die aktuellen IEs benimmt, aber Conditional Comments nicht implementiert, oder umgekehrt.  
  
Wenn viele input-Elemente erzeugt werden sollen, kann man natürlich etwas optimieren. Zum Beispiel mit einer Funktion, die sich selbst ersetzt:  
  
~~~javascript
  
function createInputElementMS(theType)  
{  
    return document.createElement('<input type="'+theType+'">');  
}  
  
function createInputElementW3C(theType)  
{  
    var inp=document.createElement('input');  
    inp.type=theType;  
    return inp;  
}  
  
function createInputElement(theType)  
{  
    var inp,e;  
    try {  
        inp=createInputElementMS(theType);  
        window.createInputElement=createInputElementMS;  
    } catch (e) {  
        inp=createInputElementW3C(theType);  
        window.createInputElement=createInputElementW3C;  
    }  
    return inp;  
}  

(Aus dem Gedächnis, ich komm an den Code nicht mehr heran.)

Alexander

[molily]

kommt auch mit Browsern klar, die sich hinsichtlich document.createElement() wie die aktuellen IEs benimmt, aber Conditional Comments nicht implementiert

Als da wären?

Mathias

[Alexander (HH)]

Moin Moin!

»» kommt auch mit Browsern klar, die sich hinsichtlich document.createElement() wie die aktuellen IEs benimmt, aber Conditional Comments nicht implementiert

Als da wären?

Keine Ahnung. Kannst Du garantieren, dass es keine gibt, weder jetzt noch in der Zukunft?

Alexander

[molily]

Kannst Du garantieren, dass es keine gibt, weder jetzt noch in der Zukunft?

Es ist hinreichend unwahrscheinlich. Warum sollte ein Nicht-IE-Browser dieses Pattern übernehmen und gleichzeitig nicht den DOM-Standard unterstützen?

Einen solchen Browser gibt es nicht und wenn eines Tages einer herauskommt, dann soll gefälligst keine Website darin nutzbar sein, weil er einfach Broken by Design wäre und absichtlich gegen Webstandards arbeitet. Dieses Verhalten ist ein IE-Bug, und einen neuen Browser, der absichtlich solche Bugs einbaut, kann in letzter Konsequenz nicht durch Programmierung unterstützt werden.

Ich plädiere immer dafür, Scripte hinsichtlich der bekannten Praktiken und Standards zu entwickeln, nicht hinsichtlich eines unbekannten und ausgedachten Browserverhalten. Letztere Arbeitsweise ist bei längerem Nachdenken nämlich schlicht unmöglich und würde zu absurdem Code führen.

Mathias

[Struppi]

» Kannst Du garantieren, dass es keine gibt, weder jetzt noch in der Zukunft?

Es ist hinreichend unwahrscheinlich. Warum sollte ein Nicht-IE-Browser dieses Pattern übernehmen und gleichzeitig nicht den DOM-Standard unterstützen?

Letztlich hat der IE ja auch keine Probleme damit mit createElement() ein input zu erzeugen. Das einzige Problem, das ich sehe, ist, dass das Element nicht in der document.forms.elements Collection eingereiht wird und damit nicht über JS zugreifbar ist (und das Problem bei Radiogroups auf das mich Joachim aufmerksam gemacht hat)

Struppi.