When calling Form.serialize, IE and Opera fail if the form contains certain elements.
Specifically, if the form contains a form sub-element (such as 'input') of name or id equal to 'length', it fails. Additionally, if the form contains any element with an id equal to 'length', it also fails. As is, the example below works in all browsers -- clicking on 'Click' produces 'me=' in an alert box.
However, if any lines commented with '<!--!!!' are uncommented, IE and Opera will fail to produce anything in the alert box. Lines commented with '<!--...' cause no errors on any browser.
IE 6SP2, 7 and Opera 9.21 were tested and failed. Firefox 2.0.7 and Safari for Windows 3.0.2 were tested and passed. Other browsers were not tested. Prototype 1.6.0_rc0 used for testing, the doctype was set to html 4.01 strict, mime-type 'text/html', quirks mode was not enabled for rendering.
I do not know if there is a spec that defines the correct behaviour in this test case. And I am not sure if it is feasible to fix. I primarily wanted to document the behaviour somewhere. If it cannot be fixed in the code, then the next best thing is some documentation somewhere prominent, for instance on prototype's API about Forms.
<script type="text/javascript">
Event.observe(window,'load',function() {
Event.observe($$('legend')[0],'click',function() {
alert( $('test').serialize() );
});
});
</script>
<form id="test">
<fieldset>
<legend>Click</legend>
<input name="me" />
<!--!!! <input name="length" /> -->
<!--!!! <input name="funny" id="length" /> -->
<!--!!! <p id="length"></p> -->
<!--... <p name="length"></p> -->
</fieldset>
</form>
<!--... <p name="length"></p> -->
<!--... <p id="length"></p> -->
<!--... <form><div><input name="length" /></div></form> -->
