#688 ✓resolved
Luis Gómez

Form.serialize ignores BUTTON elements

Reported by Luis Gómez | May 26th, 2009 @ 09:08 PM | in 1.7

I tried the IRC channel, Google and Lighthouse but still can't find a solution.

The following form:

<form class="login" style="padding: 0pt; background-color: transparent;" action="/login" method="post">
    <input type="text" id="email-address" value="" name="username" class="textinput"/>
    <input type="password" id="password" value="" name="password" class="textinput"/>
    <button value="manage" type="submit" name="sign_into" id="" class="button">Login</button>
    <button value="tour" type="submit" name="sign_into" id="" class="button outlined">Tour Listings</button>
    <input type="hidden" value="" name="next"/>
</form>

is meant to give users two ways of accessing the system:

  1. in "management" mode or...
  2. in "tour" mode.

The idea being that you click on the button to login or tour. The back-end receives the "sign_into" input value and redirects accordingly. The button element is a valid html element that should be present in the submitted values.

There is plenty of prototype goodness happening in this page but I stripped it all out and tested simply extending the form. As soon as I do, the buttons stop being submitted. They are also not available through serialize() (with or without "true").

This error has only shown up in Firefox 3.0.10. When testing in Safari, the form behaves as it should.

Note that I am using 1.6.1_rc2 but the error happens with 1.6.0.3 too.

Any ideas?

Thank you,

LG

Comments and changes to this ticket

  • Luis Gómez

    Luis Gómez May 27th, 2009 @ 03:37 AM

    I should mention I don't need to submit using javascript. I extend the form for validation purposes but the form should submit naturally.

  • Juriy Zaytsev

    Juriy Zaytsev May 27th, 2009 @ 11:46 PM

    • Milestone set to 1.7
    • Title changed from “Button tag being removed or ignored” to “Form.serialize ignores BUTTON elements”
    • State changed from “new” to “bug”

    Attaching a failing test case:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>
      </head>
      <body>
        <form action="/">
          <div>
            <input name="foo" value="foo">
            <button name="bar" value="bar">test</button>
          </div>
        </form>
        <script type="text/javascript">
          document.write('Expected: ' + 'foo=foo&bar=bar' + '<br>');
          document.write('Actual: ' + Form.serialize(document.forms[0]));
        </script>
      </body>
    </html>
    
  • Juriy Zaytsev

    Juriy Zaytsev May 27th, 2009 @ 11:47 PM

    • Tag set to needs_patch, needs_tests
  • freshteapot

    freshteapot May 28th, 2009 @ 03:45 AM

    • Assigned user set to “Juriy Zaytsev”

    Hi,

    I have a patch for it, could someone explain the process for adding a patch.

    1) do i upload a new prototype file
    2) do i upload the stubs which got changed

    I will await to hear on 1)

    But 2) I can do.

    @ Line 2612: Object.extend(Element.Methods.ByTag, {

      "FORM":     Object.clone(Form.Methods),
      "INPUT":    Object.clone(Form.Element.Methods),
      "SELECT":   Object.clone(Form.Element.Methods),
    

    2612 "TEXTAREA": Object.clone(Form.Element.Methods)

    });
    

    Needs to now read
    Object.extend(Element.Methods.ByTag, {

      "FORM":     Object.clone(Form.Methods),
      "INPUT":    Object.clone(Form.Element.Methods),
      "SELECT":   Object.clone(Form.Element.Methods),
      "TEXTAREA": Object.clone(Form.Element.Methods),
      "BUTTON": Object.clone(Form.Element.Methods)
    });
    

    Line:3639 ( might be a little more if you made the change above ).
    In Form.Element.Serializers, you need to add

    button: function(element,value) {

    if (Object.isUndefined(value)) return element.value;
      else element.value = value;
    

    },

    I added mine before 'input', probably best to move it down the list as it wont be the first option usually.

    So as I just ran these checks on a fresh script. I have attached it here.

    Cheers,
    freshteapot

  • freshteapot

    freshteapot May 28th, 2009 @ 03:46 AM

    Equally, not sure how to write a unit test for this.

  • Samuel Lebeau

    Samuel Lebeau May 28th, 2009 @ 03:46 AM

    • Tag changed from needs_patch, needs_tests to patched, tested
    • Assigned user cleared.

    Fixed, tests are OK.

  • Samuel Lebeau

    Samuel Lebeau May 28th, 2009 @ 03:46 AM

    • Assigned user set to “Juriy Zaytsev”
  • Samuel Lebeau
  • Juriy Zaytsev

    Juriy Zaytsev May 28th, 2009 @ 05:45 AM

    Samuel, thanks. Patch/tests look good. I also like change of expressions to declarations.

    The only thing that bothers me is - button: textarea assignment, or rather the name of textarea function. That function is basically an accessor for value property. Wouldn't it make sense to call it - byValue, resolveByValue, serializeValue, valueSerializer, or something along those lines? I would imagine finding textarea name in call stack (when serializing a form without a single textarea) would be quite confusing : )

  • Juriy Zaytsev

    Juriy Zaytsev May 28th, 2009 @ 05:46 AM

    Tobie, what do you say?

  • Samuel Lebeau

    Samuel Lebeau May 28th, 2009 @ 06:08 AM

    I totally agree Juriy. I was feeling quite the same, and as I couldn't find any better name, and as it was already reused in input... I left it the way it was... :)

  • Juriy Zaytsev

    Juriy Zaytsev May 30th, 2009 @ 07:51 AM

    • Tag changed from patched, tested to fixed_in_experimental_fork, patched, tested

    Fixed in my fork - http://github.com/kangax/prototype/commit/2c1923c7e8f4423c4c57e81a2...

    Also, removed slow include in favor of test (~20x faster in FF3, probably more in IE) - http://github.com/kangax/prototype/commit/efb69c94f899730c99dae54a3...

  • Samuel Lebeau
  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 04:04 AM

    • Tag changed from fixed_in_experimental_fork, patched, tested to needs:cherry-picking, patched

    [not-tagged:"fixed_in_experimental_fork" tagged:"needs:cherry-picking" bulk edit command]

  • T.J. Crowder

    T.J. Crowder November 16th, 2009 @ 04:50 PM

    • Assigned user cleared.

    [responsible:none bulk edit command]

  • Tisho Georgiev

    Tisho Georgiev March 1st, 2010 @ 08:44 PM

    • Tag changed from needs:cherry-picking, patched to needs:cherry-picking, patched, section:dom
  • GitHub Robot

    GitHub Robot October 18th, 2010 @ 12:52 AM

    • State changed from “bug” to “resolved”
    • Importance changed from “” to “Medium”

    (from [1fcf2e029977869e3389f363607cbb1c0c36fd94]) Extend BUTTON elements with everything defined in Form.Element.Methods. Ensure BUTTON elements are traversed in Form.getElements and serialized in Form.serialize. [#394 state:resolved] [#688 state:resolved] (Luis Gomez, Samuel Lebeau, kangax, Andrew Dupont) http://github.com/sstephenson/prototype/commit/1fcf2e029977869e3389...

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