#104 √ invalid
Evil.2000

form.serialize doesn't serialize radio buttons right

Reported by Evil.2000 | May 15th, 2008 @ 09:31 AM

If you want to serialize a form which has radio-buttons in, prototype serialises all of the radio buttons, not only the selected one.

Example:

<form method="POST" action="myscript.cgi" onsubmit="new Ajax.Updater('content', this.action, {method: 'post', parameters: $(this).serialize(true), evalScripts: true}); return false;">
<input type="radio" name="type" value="interval"> Interval
<input type="radio" name="type" value="once"> Once
</form>

This will produce the query string:

type=interval&type=0

This is not a browser based error, because its reproduceable on Opera, Firefox and IE.

Comments and changes to this ticket

  • Evil.2000

    Evil.2000 May 15th, 2008 @ 11:28 AM

    I made a Quick'n'Dirty change to that so it will work for me for the moment.

    Hopefully this will be made in a better way ;)

      serializeElements: function(elements, options) {
        if (typeof options != 'object') options = { hash: !!options };
        else if (Object.isUndefined(options.hash)) options.hash = true;
        var key, value, submitted = false, submit = options.submit;
    
        var data = elements.inject({ }, function(result, element) {
          if (!element.disabled && element.name) {
            key = element.name; value = $(element).getValue();
            if (value != null && (element.type != 'submit' || (!submitted &&
                submit !== false && (!submit || key == submit) && (submitted = true)))) {
              if (key in result) {
                // a key is already present; construct an array of values
                // --- quick and dirty hack start ---
                if(!(element.type == 'radio' && value == '0')) {
                	if (!Object.isArray(result[key])) result[key] = [result[key]];
                	result[key].push(value);
                }
                // ---- quick and dirty hack end ----
              }
              else result[key] = value;
            }
          }
          var debug = "";
          for (var schl in result) debug += schl+": "+result[schl]+"\n";
          alert(debug);
          return result;
        });
    
        return options.hash ? data : Object.toQueryString(data);
      }
    
  • John-David Dalton

    John-David Dalton May 15th, 2008 @ 09:33 PM

    Which version of Prototype are you using I don't think this is an issue in 1.6.0.2

  • John-David Dalton

    John-David Dalton May 15th, 2008 @ 09:41 PM

    Ya I cannot reproduce this in 1.6.0.2

  • Evil.2000

    Evil.2000 May 16th, 2008 @ 04:08 AM

    It says:

    Prototype JavaScript framework, version 1.6.0.2

    Okay i tested it again with fresh sources from www.projeotoypejs.org and it worked. Sorry, my bad!

    I found the error. I changed a line in Form.Element.Serializers.inputSelector from

        if (Object.isUndefined(value)) return element.checked ? element.value : null;
    

    to

        if (Object.isUndefined(value)) return element.checked ? element.value : '0';
    

    Because i had a checkbox and wanted that this checkbox will be reported as '0' in serialized query sting if it isn't checked. So its easier to handle in any server-side script. But this affects the serializing of radio buttons, too.

    Maybe its better to serialize the checkbox- and radio-inputs in a seperate way?

    Or is there something easier to get this to work?

  • John-David Dalton

    John-David Dalton May 16th, 2008 @ 08:29 AM

    • → State changed from “new” to “invalid”
  • John-David Dalton

    John-David Dalton May 16th, 2008 @ 08:30 AM

    you are free to modify the source code in anyway you want.

    With a small 'if' statement I am sure you can have checkboxes return 1 thing and radio buttons return another.

  • Evil.2000

    Evil.2000 May 19th, 2008 @ 04:25 AM

    I did.

    inputSelector: function(element, value) {
        if (Object.isUndefined(value)) {
        	if (element.type.toLowerCase() == "checkbox") {
        		return element.checked ? element.value : '0';
        	} else {
        		return element.checked ? element.value : null;
        	}
        } else {
        	element.checked = !!value;
        }
      },
    

    Maybe this kind of "feature" will be implemented is a future version of Prototype?

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.

Ticket Bins

People watching this ticket