373200 - Form elements with identical name attributes embedded inside different TableColumn/Div/Other tags dont reflect the new order when the embedding tags are rearranged

Status: RESOLVED DUPLICATE of bug 332893

(Core :: DOM: Core & HTML, defect)

Description

[manickam]

User-Agent:       Mozilla/5.0 (X11; U; Linux i386; en-US; rv:1.8.1) Gecko/20061010 FreeBSD/i386 Firefox/2.0
Build Identifier: Mozilla/5.0 (X11; U; Linux i386; en-US; rv:1.8.1) Gecko/20061010 FreeBSD/i386 Firefox/2.0

When a set of tags, say <div>, embed form elements inside them, with identical name attributes, and the <div> tags are rearranged, the form elements dont reflect the new order of the <div> tags. Instead, the form elements corresponding to the <div> which is moved, get appended/pushed to the bottom of the elements list of the form.

This bug is quite important since, it is a common possibility that pages may receive inputs where the order of the data is important, & tables/divs are used for giving UI, with form elements embedded to receive the actual information pertaining to the order of the data to be sent.

Reproducible: Always

Steps to Reproduce:
<script type='text/javascript'>
var i = 1;
function genNewsCollRow(  )
{
	strHTML = '<div id=' + i + '><input type=hidden name=inp_ids value=inp_' + i + ' /></div>';
	i++;
	return strHTML;
}

function saveColl()
{
	var strHTML = '';
	var objfrm = document.savecollection;

	strHTML = strHTML + genNewsCollRow( );
	strHTML = strHTML + genNewsCollRow( );
	strHTML = strHTML + genNewsCollRow( );
	objfrm.innerHTML = objfrm.innerHTML + strHTML;
	
	var objids = document.savecollection.inp_ids;
	var i;
	for( i=0; i< objids.length; i++)
	{
		alert( 'before rearrange ' + objids[i].value );
	}
	alert( objfrm.innerHTML );

	var objtr3 = document.getElementById( '3' );
	var objtr1 = document.getElementById( '1' );

	objtr3 = objfrm.removeChild( objtr3 );
	objids = document.savecollection.inp_ids;

	objfrm.insertBefore( objtr3, objtr1 );

	alert( objfrm.innerHTML );
	objids = document.savecollection.inp_ids;
	for( i=0; i< objids.length; i++)
	{
		alert( 'after rearrange ' + objids[i].value );
	}
}


</script>

<form name=savecollection >
<table width="80%" style="border: 2px groove blue; background-color: lightblue" align=center>
<tbody id="NewsCollection">
</tbody>
</table>
<table width="80%" style="border: 2px groove blue; background-color: lightblue" align=center>
<tr><td align=center ><input type=submit name=saveCollList value='Save' onclick='saveColl(); return false;' /></td></tr>
</table>
</form>

Actual Results:  
The alerts display the order before rearrange as inp_1, inp_2, inp_3
& the same after rearrange also

Expected Results:  
The alerts should display the order before rearrange as inp_1, inp_2, inp_3
& after rearrange as, inp_3, inp_1, inp_2

It looks like any form elements embedded in other tags & inserted/rearranged in the DOM, get appended at the bottom of the form's elements list.

Comment 1

[manickam]

Attachment: TestScript Sample

Comment 2

[Alex Vincent [:WeirdAl]]

I'm not certain this testcase reflects form submission, which is what the second paragraph of comment 0 talks about.  The testcase doesn't indicate submission order, only a "DOM Level 0" ordering of elements.

javascript:alert(document.forms[0].elements[1].value) shows "inp_3" (elements[0] is the save button)

Comment 3

[manickam]

Hi.. I checked it out.. It behaves as you said, when submitting the form, reflecting the right order.. 

But in a situation where we need to manually submit/preprocess the specific elements of form data before submitting, unless we use "form.elements" property, our approach will not work. And iterating a large form.elements list for a specific element-list would be either tedious/waste of time..

Comment 4

[Garrett Smith]

Is this bug 332893?

Comment 5

[Cory Dodt]

I can confirm bug 332893, but can't confirm this wrinkle to it.

It appears to make no difference whether an enclosing element "embeds" the input or not, document order and form.name order are different either way.

See http://code.google.com/p/google-jstemplate/issues/detail?id=1 which I opened as a bug in google-jstemplate but which actually appears to be a bug in Firefox (can't reproduce in Google Chrome, or any version of IE).