#104 ✓invalid
Evil.2000

form.serialize doesn't serialize radio buttons right

Reported by Evil.2000 | May 15th, 2008 @ 04:32 PM

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 @ 06:28 PM

    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 16th, 2008 @ 04:33 AM

    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 16th, 2008 @ 04:41 AM

    Ya I cannot reproduce this in 1.6.0.2

  • Evil.2000

    Evil.2000 May 16th, 2008 @ 11: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 @ 03:29 PM

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

    John-David Dalton May 16th, 2008 @ 03:30 PM

    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 @ 11: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?

  • Tobie Langel

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

    • Tag set to section:dom

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

  • jeuxnewbanat

    jeuxnewbanat March 18th, 2016 @ 01:58 AM

    • Importance changed from “” to “”

    jeuxnewbanat يقدم أجمل وأحسن العاب تلبيس بنات حقيقية نعم حقيقة وليس خيال مع هدا الموقع المتجدد جربوه ولاتنسو مشاركته مع اصدقائكم

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

Pages