Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Colleen Lanham and Demian Holmberg and Robert Dix and Paul Carney

Hidden Input Ordering in FireFox Form Submission

By Ben Nadel on

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

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.