[DOM] form elementen via DOM worden niet in FF herkend

[E-Vix]

Ik heb iets bizars. Iets wat erg simpel lijkt, wil niet werken zoals het hoort.
Ik ben bezig met een formulier waar een van te voren onbekend aantal gegevens ingevoerd moeten worden. Hierom wil ik dus het formulier door middel van een knop een extra invoerveld kunnen geven. In eerste instantie wilde ik dit via document.innerHtml doen, maar dat vond Firefox niet leuk. Zodra ik er een veld bijplaatste werd een deel van het formulier niet meer meegenomen.
Hierna ben ik met DOM gaan werken (zoals het eigenlijk ook hoort als je het netjes wilt doen). De invoervelden worden keurig bijgevoegd, en de oude invoervelden worden niet geleegd en worden ook in het formulier meegenomen. in IE6 en IE7 werkt het helemaal zoals het hoort, maar in Firefox 2.0 weer niet. De reeds in het formulier aanwezige elementen worden meegenomen bij het submitten, maar de nieuwe via DOM toegevoegde elementen niet.

Hieronder mijn code:

JavaScript:

<script language="JavaScript" type="text/javascript"> 
function invoerToevoegen(){
    var kamertypes = Array("Tweepersoons kamer","Appartement","Familiekamer");
    var div = document.getElementById('kamertypes');

    var objSelect = document.createElement("select");
    objSelect.name="kamertype[]";
        
    for (i=0; i<kamertypes.length; i++) {
        var objOption = document.createElement("option");
        objOption.text=kamertypes[i];
        objOption.value=[i]+1;
        objSelect.options.add(objOption);
    }

    var objInput = document.createElement('input');
    objInput.setAttribute('type', 'text');
    objInput.setAttribute('name', 'kamertype_omschrijving[]');

    div.appendChild(objSelect); 
    div.appendChild(document.createTextNode(' ')); 
    div.appendChild(objInput);
    div.appendChild(document.createElement('break')); 
}
</script>

en de bijbehorende HTML code:

HTML:

    <tr>
        <td class="antwoord">Kamertypes</td>
        <td><div id="kamertypes"><select name="kamertype[]"><option value="1">Tweepersoons kamer</option><option value="2">Appartement</option><option value="3">Familiekamer</option></select>
            <input type="text" name="kamertype_omschrijving[]"><br>
            <select name="kamertype[]"><option value="1">Tweepersoons kamer</option><option value="2">Appartement</option><option value="3">Familiekamer</option></select>
            <input type="text" name="kamertype_omschrijving[]"><br>
            <select name="kamertype[]"><option value="1">Tweepersoons kamer</option><option value="2">Appartement</option><option value="3">Familiekamer</option></select>
            <input type="text" name="kamertype_omschrijving[]"><br></div><br>
        <a href="javascript:invoerToevoegen()">Meer invoervelden...</a></td>
    </tr>

Voor de duidelijkheid, de 3 die al in de HTML staan worden gewoon gesubmit in FireFox, maar alle velden die er later via DOM bij komen niet. Onder IE6 en IE7 wel. Bij mijn collega op zijn PC doet hij het zelfde onder FireFox.
Heeft iemand enig idee waarom dit gebeurd, en wat er aan te doen is?

[Verwijderd]

probeer eens regel 13 objSelect.appendChild(objOption);

verder lijkt me regel 23 een beetje klets (break element?), maar of dat boeit vraag ik me af

trouwens nu ik goed kijk: regel 12 is onzin waarschijnlijk niet de bedoeling, dit levert "01" "11" etc op.

[ Voor 14% gewijzigd door Verwijderd op 31-05-2007 19:36 ]

[E-Vix]

regel 13 veranderen in objSelect.appendChild(objOption); maakt helaas niets uit. Hij blijft de toegevoegde objecten in FF niet in de submit meenemen.

Regel 23 een break element is om de opmaak goed te houden. Als je het niet als element maar als text doet, dan krijg je gewoon <br> in je browserscherm te zien.
regel 12 is om er voor te zorgen dat ik geen 0 als waarde terug krijg. Key 0 van een array is immers 0, maar in de database wil ik geen optie opslaan met waarde 0 tenzij de waarde die daar weer aan gekoppeld is 0 of nee is.

[akaIDIOT]

Wellicht wil Firefox dat je het invoerveld ook daadwerkelijk toevoegd aan je form?
Volgens w3school heeft een form een elements-array. Misschien zal het helpen je nieuwe select-element daar aan toe te voegen...

[BikkelZ]

Als je je script uitgevoerd hebt, zie je dan nieuwe errors, warnings, etc. in je error console? Als je met CTRL+A alles selecteert en 'view selection source' doet, zie je dan dat er dingen veranderd zijn?

[crisp]

E-Vix schreef op donderdag 31 mei 2007 @ 19:21:
[...]
Regel 23 een break element is om de opmaak goed te houden. Als je het niet als element maar als text doet, dan krijg je gewoon <br> in je browserscherm te zien.

Dat element heet 'br' en niet 'break'

regel 12 is om er voor te zorgen dat ik geen 0 als waarde terug krijg. Key 0 van een array is immers 0, maar in de database wil ik geen optie opslaan met waarde 0 tenzij de waarde die daar weer aan gekoppeld is 0 of nee is.

Maar [i] is een array literal, dus je telt 1 op bij een array object ipv bij de waarde van variabele i

[E-Vix]

akaIDIOT schreef op donderdag 31 mei 2007 @ 22:04:
Wellicht wil Firefox dat je het invoerveld ook daadwerkelijk toevoegd aan je form?
Volgens w3school heeft een form een elements-array. Misschien zal het helpen je nieuwe select-element daar aan toe te voegen...

Ik heb geprobeerd om in plaats van hem aan de div toe te voegen om hem aan de form toe te voegen, maar dan komt hij niet eens in beeld. Ook geprobeerd het attribuut form van de betreffende elementen in te stellen, maar dat haalde ook niets uit.

BikkelZ schreef op donderdag 31 mei 2007 @ 22:18:
Als je je script uitgevoerd hebt, zie je dan nieuwe errors, warnings, etc. in je error console? Als je met CTRL+A alles selecteert en 'view selection source' doet, zie je dan dat er dingen veranderd zijn?

Geen errors in de error console. Als ik view selection source doe, dan krijg ik de HTML code te zien exact zoals ik zou verwachten. Dus met de extra invoervelden er in.

crisp schreef op donderdag 31 mei 2007 @ 23:04:
Dat element heet 'br' en niet 'break'

Maar [i] is een array literal, dus je telt 1 op bij een array object ipv bij de waarde van variabele i

Nu je het zegt zie ik het. Maar het had in ieder geval geen invloed op de werking van de code verder.

De oplossing is inmiddels gevonden. Omdat de <form> tag binnen de table stond pakte hij hem onder FF niet goed. de <form> tag is nu buiten de table geplaatst, en dan pakt hij hem wel goed.

[ Voor 6% gewijzigd door E-Vix op 01-06-2007 09:20 . Reden: oplossing gevonden ]