#77 ✓resolved
Peter Adrianov

Error when serializing form which contains field named "length"

Reported by Peter Adrianov | August 25th, 2008 @ 08:06 AM | in 1.7

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

    • 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”
    • State changed from “works_for_me” to “bug”
    • Assigned user set to “Juriy Zaytsev”
    • Tag set to form, needs_patch, needs_tests
    • Milestone set to 1.7

    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 @ 01:30 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:44 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:39 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

  • GitHub Robot

    GitHub Robot March 23rd, 2009 @ 05:15 AM

    • State changed from “bug” to “resolved”

    (from [0b4e142d8aea0383b3fcf30af925c982b7b175c0]) Form.serialize now works safely with forms that have "length"-named elements. [#77 state:resolved] http://github.com/sstephenson/pr...

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:01 AM

    • Tag changed from form, needs_patch, needs_tests to needs_patch, needs_tests, section:dom

    [not-tagged:"form" tagged:"section:dom" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:26 AM

    • Tag changed from needs_patch, needs_tests, section:dom to missing:tests, needs_patch, section:dom

    [not-tagged:"needs_tests" tagged:"missing:tests" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:28 AM

    • Tag changed from missing:tests, needs_patch, section:dom to missing:patch, missing:tests, section:dom

    [not-tagged:"needs_patch" tagged:"missing:patch" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 03:36 AM

    • Tag changed from missing:patch, missing:tests, section:dom to missing:patch, needs:tests, section:dom

    [not-tagged:"missing:tests" tagged:"needs:tests" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 03:37 AM

    • Tag changed from missing:patch, needs:tests, section:dom to needs:patch, needs:tests, section:dom

    [not-tagged:"missing:patch" tagged:"needs:patch" bulk edit command]

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

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

Referenced by

Pages