Hidden Input Ordering in FireFox Form Submission
Posted May 3, 2006 at 1:17 PM by Ben Nadel
I just has a wicked time trying to debug a crazy issue a co-worker was having. He was changing the sort of table rows within a table. Each row had a hidden input (for ID) in the first TD. Each row input had the same name, so that when the form was submitted, each ID would be submitted into a comma delimited list. We assumed that the order of the IDs in the list would mirror the order of the TRs (and hence the child input) in the submitted page.
This works in Internet Explorer (IE) but not in FireFox (FF). In FF, the list of the IDs did not match the physical order of the inputs in the submitted page and it didn't seem to follow any sort of logical order. It was driving me crazy, trying to help him, and then a solution popped into my head: Don't rely on the hidden inputs. Maintain a list of IDs outside of the table.
To do so, after each table row sort, you had to loop over each row, find the input, grab its ID and append that to a hidden value list of IDs. This worked perfectly. The only overhead is that you need to maintain the list after each sort, but that is fairly small in the grand scheme of things (if you are married to the idea of sorting table rows).
This is some example code of the UpdateValueList() function that takes, as an argument, the last row that was sorted:
- function UpdateValueList( objRow ){
- var objForm = document.forms[0];
- var objValueList = objForm.elements["lst_id"];
- var objTBody = objRow.parentNode;
- var intI = null;
- var objInput = null;
-
- // Reset value list.
- objValueList.value = "";
-
- // Loop over TRs (by looping over TBodys child nodes).
- for (intI = 0 ; intI < objTBody.childNodes.length ; intI++){
-
- // Get the current row of the TBody.
- objRow = objTBody.childNodes[ intI ];
-
- // Check to make sure we have TR (not a text node);
- if (objRow.nodeType == 1){
- // Get the first input for the Row. Search for all INPUT elements within THIS TR.
- objInput = objRow.getElementsByTagName("input")[0];
-
- // Add that value back to the value list.
- objValueList.value += ( objInput.value + ", " );
- }
- }
-
- }
As you can see, I loop through the childNodes of the Table Body to get each Table Row, then based on the Table Row, I query for the input tags (the first of which is the hidden input ID). Then, the value list hidden field (which will be used for form submission) is updated.
Reader Comments
Good Luck! http://www.google.com
