Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

dynamically creating inputs by javascript / DOM

DOM difficulties in handling inputs with arrayed inputs ( name[ ] )

6:15 am on Sep 9, 2004 (gmt 0)

New User

10+ Year Member

joined:Sept 9, 2004
votes: 0

We have a table with rows of format:
<td> Description 1</td>
<td> Description 2 </td>
<input type=hidden name="idx1[]" value="index of Description 1 in db">
<input type=hidden name="idx2[]" value="index of Description 2 in db">

We have select boxes at the bottom of the table, and a button to add these parameters to the above table.

The JS/DOM code parses the table until it finds the appropriate row (list is sorted alphabetically by Desc1 / Desc2) then:
- inserts a TR
- appends TD, sets innerHTML
- appends TD, sets innerHTML
- appends TD, sets innerHTML with declaration for the new inputs.
Please note that ALL these inputs are named exactly as written, with empty brackets. This allows our PHP code to later process them in an array parse loop quite easily.

Now the problem we have occurs only (so far as we can tell) in Mozilla.
When the form is submitted, on IE, the POST values for the arrays idx1[] and idx2[] ARE in alphabetical order of Desc1 and Desc2 (although these values are not submitted...)
In Mozilla, the POST values are indexed in the order they were created, not the order they were displayed.

By studying with the DOM explorer tool, we figured out that when we set the innerHTML of a new TD with an input tag, the input appears as the LAST child of the document.form object, and not between the siblings that correspond to the appropriate TRs...

Can anyone suggest a workaround or solution to this problem?

7:32 am on Sept 9, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
votes: 0

I heard that there had been a worse problem in earlier builds, where dynamically inserted form elements were not sent at all. A suggestion could be not to use innerHTML, rather 'proper' DOM methods - document.createElement, and then one of the usual insertion methods for getting the element into it's correct position. I haven't tested that this actually works in getting the form to post correctly, but I reckon it's well worth trying.
7:49 am on Sept 9, 2004 (gmt 0)

New User

10+ Year Member

joined:Sept 9, 2004
votes: 0

I actually found a convenient workaround.
I added a third unnumbered hidden input named idx3[] containing, in full text "Description1_Description2"

The page that recieves the submitted information then calls array_multisort(idx3,idx1,idx2)
and I get my arrays sorted as they were displayed (since the display was ordered by Description1 / Description 2)

Thank php for that clever sorting function!

1:43 pm on Sept 9, 2004 (gmt 0)

New User

10+ Year Member

joined:June 10, 2002
votes: 0

I don't recall their being anything in the HTTP spec that states what order POSTed fields must be sent back in -- I think this is left up to whomever writes/implements browsers.

I certainly wouldn't write any server-side code that relied on the order of POSTed fields -- it's always better to assume that you can't trust the client to do anything correctly or consistently (it leads to more robust server-side code).

But if I did need POSTed fields in a certain ordering for some reason I would sort them before the operation that needed them in that order.

I don't think there's anything in the HTTP spec that states any specific ordering for query string parameters either -- they're pretty much the same thing.