#77 bug
Peter Adrianov

Error when serializing form which contains field named "length"

Reported by Peter Adrianov | May 6th, 2008 @ 07:44 AM | in 1.6.1

When I attempt to serialize a form, which contains a field named "length" with

$('form').serialize(true)

command, I obtain an object, which consist only of the field "length".

Comments and changes to this ticket

  • Juriy Zaytsev

    Juriy Zaytsev August 25th, 2008 @ 05:16 PM

    • → Tag changed from “” to “form needs_patch needs_tests”
    • → Milestone changed from “” to “1.6.1”
    • → State changed from “works_for_me” to “bug”
    • → Title changed from “Error with serializing form which contain field named "length"” to “Error with serializing form which contain fields named as properties of Object.prototype”
    • → Assigned user changed from “” to “Juriy Zaytsev”

    Afaik, form serialization still fails with form controls named as properties of Object.prototype - toString/valueOf/hasOwnProperty, etc.

    The fix is trivial if form serialization were to use hasOwnProperty when detecting whether an object contains a certain key.

  • John-David Dalton

    John-David Dalton September 16th, 2008 @ 04:54 AM

    I think this might be unrelated to hasOwnProperty. The ticket probably has to do with IE auto-magically referencing elements by ID/Name as properties of a NodeList. One possible way around this problem is to add a check in the each method that will iterate over nodeLists avoiding the length prop.

  • Juriy Zaytsev

    Juriy Zaytsev September 16th, 2008 @ 04:05 AM

    @John

    Actually, the issue can be observed in any browser ; )

  • John-David Dalton

    John-David Dalton September 16th, 2008 @ 04:52 AM

    Here is a simple example of the behavior.

    
<html>
<head>
<title>Test</title>
<style>

</style>

<script src="prototype.js" type="text/javascript"></script>

</head>
<body>
<div></div>
<div></div>
<div></div>

<script>
$(document.body).insert(new Element('div', {id:'length'}));
alert(document.getElementsByTagName('div').length); // alerts 4 in FF, object in IE
</script>
</body>
</html>
  • Juriy Zaytsev

    Juriy Zaytsev September 16th, 2008 @ 04:53 AM

    • → Title changed from “Error with serializing form which contain fields named as properties of Object.prototype” to “Error when serializing form which contains field named "length"”

    Sorry for the confusion, I'll change the title and make a separate ticket for Object.prototype.* issue.

  • Gabriel Humeniuc

    Gabriel Humeniuc October 9th, 2008 @ 02:27 PM

    i encountered the same problem.

    Form.serialize calls Form.getElements Form.getElements creates an Enumerable with $A($(form).getElementsByTagName('*')); $A make use of length property of the iterable parameter. :(

    Sample

    
<form action="" method="post" name="test-form" id="test-form">
<input type="text" value="input_one_value" name="input_one" id="input_one_id"/>
<input type="text" value="123" name="length" id="length_id"/>
<input type="text" value="input_two_value" name="input_two" id="input_two_id"/>
</form>

    
alert($('test-form').serialize());
// FF   returns input_one=input_one_value&length=123&input_two=input_two_value
// IE6  length=123

alert($A($('test-form').getElementsByTagName('*')));
// FF   [Object HTMLInputElement],[Object HTMLInputElement],[Object HTMLInputElement]
// IE6  [object]

alert($('test-form').getElementsByTagName('*').length);
// FF   3
// IE6  [object]
  • Juriy Zaytsev

    Juriy Zaytsev October 9th, 2008 @ 06:13 PM

    Yes, IE (and Opera, to some extent, if I'm not mistaken) are not quite careful when associating form properties with form elements.

    NodeList interface (i.e. item, length, etc.) methods are all effectively shadowed by references to same-named elements (in those browsers)

    This is part of the whole IE DOM mess. I'm not sure if we can work around it, except for not using NodeList methods or any functions that use those methods (e.g. $A)

  • Juriy Zaytsev

    Juriy Zaytsev October 9th, 2008 @ 06:26 PM

    The funny part is that there's no guarantee that methods that we use are not "conflicting" with names of form controls. Even if we were to step away from NodeList' methods, there could be problems:

    
  $(document.forms[0]).insert(
    new Element('input', {
      type: 'text',
      name: 'getElementsByTagName'
    }));

  document.forms[0].getElementsByTagName + ''; // "[object HTMLInputElement]"
  • Juriy Zaytsev

    Juriy Zaytsev October 9th, 2008 @ 06:40 PM

    Looks like, once created, these wonderful element references can not be deleted nor modified : )

    
document.forms[0].appendChild(
  new Element('input', {
    type: 'text',
    name: 'childNodes'
  }));

document.forms[0].childNodes + ''; // "[object HTMLInputElement]"
delete document.forms[0].childNodes; // Error: "Object doesn't support this action"
document.forms[0].childNodes = null; // Error: "Object doesn't support this property or method"
  • Andrew Dupont

    Andrew Dupont October 9th, 2008 @ 11:33 PM

    Yeah, you can't remove that reference without removing the element. And you can't change the name property dynamically in IE.

    BLËRG

Please Login or create a free account to add a new comment.

You can update this ticket by sending an email to from your email client. (help)

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The Prototype JavaScript library.

Shared Ticket Bins

People watching this ticket

Tags