[js] W3C DOM extending form & IE

[Ybox]

Ik heb met W3C DOM een form gemaakt zodat je met een knop extra regels kan toevoegen.
Dit werkt allemaal prima onder Mozilla en Opera en deels onder IE.
Waar het mis gaat bij IE is het benaderen van de nieuwe velden, ze krijgen allemaal netjes een nieuwe unieke naam.

code:

document.getElementsByName(week[y] + tmp_num_arr[1]).item(0).value

De bovenstaande code vindt onder mozilla of opera gewoon een object en geeft netjes z'n value terug, maar onder IE vindt hij niets...

Hoe dit "leuke" IE probleempje op te lossen.

[NMe]

Javascript hoort in Webdesign & Graphics, zoals je ook in onze FAQ had kunnen lezen.

PW>>WG

[crisp]

Clientside scripting hoort in W&G

verder: wat is de uitkomst van week[y] + tmp_num_arr[1] ? (name en ID attributen mogen niet met een cijfer beginnen)
Kan je niet beter gewoon gebruik maken van de elements collection van je form ipv het 'duurdere' getElementsByName?

[ Voor 15% gewijzigd door crisp op 14-08-2005 21:45 ]

[Ybox]

crisp schreef op zondag 14 augustus 2005 @ 21:44:
Clientside scripting hoort in W&G

verder: wat is de uitkomst van week[y] + tmp_num_arr[1] ? (name en ID attributen mogen niet met een cijfer beginnen)
Kan je niet beter gewoon gebruik maken van de elements collection van je form ipv het 'duurdere' getElementsByName?

de uitkomts van week[y]+tmp_num_arr = maandag_1 dus dat begin niet met een nummer.
Elements collection Werkt wederom wel weer met mozilla en Opera maar niet met IE.
IE geeft als foutmelding dat er geen object gevonden wordt.

[crisp]

Dan ben ik bang dat we toch echt wat meer code nodig hebben om het probleem te kunnen analyzeren

[MBV]

wat doe je moeilijk? Je hebt toch een array bij zo'n form waarin alle elementen staan, met een nummer? Je kan ze zelfs oproepen als een array. 1,5 jaar geleden gedaan, dus weet niet meer hoe het werkte (en voor een bedrijf dat closed source werkt, waarvan ik niet eens meer een login van de website heb )een of andere sufferd is een index.html in /js vergeten. toch heb ik er weinig aan, omdat ik de context niet meer weet...

[r0bert]

Is het niet gewoon het probleem dat jij het resultaat van getElementsByName() niet als Array benaderd?

[Verwijderd]

Als je de nieuwe velden een ID geeft die overeenkomt met de naam en je benadert deze vervolgens met getElementById() zal het waarschijnlijk wel werken.

[Ybox]

Verwijderd schreef op zondag 14 augustus 2005 @ 23:00:
Als je de nieuwe velden een ID geeft die overeenkomt met de naam en je benadert deze vervolgens met getElementById() zal het waarschijnlijk wel werken.

Je hebt helemaal gelijk. Het is een bug in IE , daarom werkte het wel onder Opera en Mozilla :

Secondly the generated form fields are unreachable by a traditional document.forms call: Explorer simply doesn't enter them in the arrays. This can be worked around by giving the form field an ID and then using getElementById().

[r0bert]

r0bert schreef op zondag 14 augustus 2005 @ 22:58:
Is het niet gewoon het probleem dat jij het resultaat van getElementsByName() niet als Array benaderd?

Al geprobeerd? Want het werkt bij mij namelijk prima (wel na het laden van de pagina het element aanroepen)

edit:
document.getElementsByName(week[y] + '' + tmp_num_arr[1])[0].value

[ Voor 14% gewijzigd door r0bert op 15-08-2005 11:54 ]

[Ybox]

r0bert schreef op maandag 15 augustus 2005 @ 11:51:
[...]

Al geprobeerd? Want het werkt bij mij namelijk prima (wel na het laden van de pagina het element aanroepen)

edit:
document.getElementsByName(week[y] + '' + tmp_num_arr[1])[0].value

dat gaat wel als je gewoon een form maakt met html, maar zodra je nodes gaat klonen (w3c dom) voegt IE ze niet toe aan de document array en kan je ze gewoon niet meer vinden.
IE return ook gewoon netjes 0 elementen terug, dit is ook blijkbaar een bekende bug.

[Verwijderd]

r0bert schreef op zondag 14 augustus 2005 @ 22:58:
Is het niet gewoon het probleem dat jij het resultaat van getElementsByName() niet als Array benaderd?

hij benadert ze als collection, wat het ook is, dat je een collectie ook via een array syntax kan benaderen is niet relevant

[crisp]

Verwijderd schreef op maandag 15 augustus 2005 @ 15:41:
[...]


hij benadert ze als collection, wat het ook is, dat je een collectie ook via een array syntax kan benaderen is niet relevant

De item() call is echter wel weer een extra method-call en daarmee dus ook trager

[r0bert]

Ybox schreef op maandag 15 augustus 2005 @ 15:38:
[...]


dat gaat wel als je gewoon een form maakt met html, maar zodra je nodes gaat klonen (w3c dom) voegt IE ze niet toe aan de document array en kan je ze gewoon niet meer vinden.
IE return ook gewoon netjes 0 elementen terug, dit is ook blijkbaar een bekende bug.

Ok, verkeerd begrepen denk ik. Maar begrijp het nog steeds niet. Dit is niet wat je wilt doen? Want dat werkt gewoon:

js

Java:

fBenaderForm = function ()
{
    oForm       = document.getElementsByName('frmTemp')[0];
    oClonedNode     = document.getElementsByName('txtTmp')[0].cloneNode(true);
    oClonedNode.name= 'txtTmpCopy';
    
    oForm.appendChild(oClonedNode); // oForm.childNodes.item(oForm.childNodes.length-1?) = oForm.append.... evt.?
    
    alert(document.getElementsByName('txtTmpCopy')[0].name);
}

html

XML:

<body onload="fBenaderForm()">
    <form name="frmTemp">
        <input type="text" name="txtTmp" />
        <!-- wordt ingevoegd via dom <input type="text" name="txtTmpCopy" /> //-->
    </form>
</body>

[ Voor 20% gewijzigd door r0bert op 15-08-2005 17:13 ]

[Ybox]

r0bert schreef op maandag 15 augustus 2005 @ 17:11:
[...]


Ok, verkeerd begrepen denk ik. Maar begrijp het nog steeds niet. Dit is niet wat je wilt doen? Want dat werkt gewoon:

js

Java:

fBenaderForm = function ()
{
    oForm       = document.getElementsByName('frmTemp')[0];
    oClonedNode     = document.getElementsByName('txtTmp')[0].cloneNode(true);
    oClonedNode.name= 'txtTmpCopy';
    
    oForm.appendChild(oClonedNode); // oForm.childNodes.item(oForm.childNodes.length-1?) = oForm.append.... evt.?
    
    alert(document.getElementsByName('txtTmpCopy')[0].name);
}

html

XML:

<body onload="fBenaderForm()">
    <form name="frmTemp">
        <input type="text" name="txtTmp" />
        <!-- wordt ingevoegd via dom <input type="text" name="txtTmpCopy" /> //-->
    </form>
</body>

Robert, jou code moet ik nog ff testen

maar ik gebruik inplaats van append insertbefore omdat ik ze op een bepaalde plaats wil hebben ...

code:

<!-- newFields is een array van inputfields netjes gerenamed enzo />
var insertHere = document.getElementById(element);
     insertHere.parentNode.insertBefore(newFields,insertHere);

Ik weet niet wat het verschil is tussen het commando insertbefore en appendChild I.S.M IE maar dat ga ik morgen testen...
Bedankt iig voor je input

[Ybox]

r0bert schreef op maandag 15 augustus 2005 @ 17:11:
[...]


Ok, verkeerd begrepen denk ik. Maar begrijp het nog steeds niet. Dit is niet wat je wilt doen? Want dat werkt gewoon:

js

Java:

fBenaderForm = function ()
{
    oForm       = document.getElementsByName('frmTemp')[0];
    oClonedNode     = document.getElementsByName('txtTmp')[0].cloneNode(true);
    oClonedNode.name= 'txtTmpCopy';
    
    oForm.appendChild(oClonedNode); // oForm.childNodes.item(oForm.childNodes.length-1?) = oForm.append.... evt.?
    
    alert(document.getElementsByName('txtTmpCopy')[0].name);
}

html

HTML:

<body onload="fBenaderForm()">
    <form name="frmTemp">
        <input type="text" name="txtTmp" />
        <!-- wordt ingevoegd via dom <input type="text" name="txtTmpCopy" /> //-->
    </form>
</body>

Werkt met jou code wel maar met de onderstaande test code niet :

XML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" >

<head>
  <title>Urendeclaratie</title>
  </script>
    <script type="text/javascript">
    function recalc2(object){
    recalc(object);
    }
    
    fBenaderForm = function () 
    { 
        oForm         = document.getElementsByName('frmTemp')[0]; 
        oClonedNode     = document.getElementsByName('txtTmp')[0].cloneNode(true); 
        oClonedNode.name= 'txtTmpCopy'; 
     
        oForm.appendChild(oClonedNode); // oForm.childNodes.item(oForm.childNodes.length-1?) = oForm.append.... evt.? 
    }
    
   </script>
</head>
<body  onload="init()">
        <form name="frmTemp"> 
        <input type="text" name="txtTmp" onchange="     alert(document.getElementsByName('txtTmpCopy')[0].name);"/> 
        <!-- wordt ingevoegd via dom <input type="text" name="txtTmpCopy" /> //--> 
        
        <input type='button' onclick="fBenaderForm()" />
        </form> 
</body>
</html>

[r0bert]

Bij mij wel. Je roept in de body een functie init() aan. Die zie ik nergens terug. De rest van de code zonder onload="init()" werkt bij mij zowel in FF als in IE prima. Misschien zit het dus in je init-functie?

[Ybox]

r0bert schreef op dinsdag 16 augustus 2005 @ 10:35:
Bij mij wel. Je roept in de body een functie init() aan. Die zie ik nergens terug. De rest van de code zonder onload="init()" werkt bij mij zowel in FF als in IE prima. Misschien zit het dus in je init-functie?

Vreemde situatie, bij mij werkt het gewoon niet onder IE6 (die init() roept niets aan was het alleen even vergeten te verwijderen voor de test). Het gaat vooral om de situatie dat het een naam moet terug geven bij het onchange event.

Anyway het werkt wel als je ieder element een ID geeft en die aanroept met getelementbyid().