jQuery: submit disabled fields

Question

I know the defined behavior for web forms is to not submit disabled fields... but that's not the definition I want. I want to use ajax to post the form and I want it to get all fields, even if they are disabled. I don't want to build a workaround where I make the field "look disabled"... or have to hack it where I enable the fields -> post -> disable.

is it possible to make ajaxSubmit() or serialize() grab the disabled fields as it's moving through the DOM and grabbing values? or is there another serialize plugin out there that can do this? or does someone have a mod I can make to one of these plugins to make it work?

or am I doomed to hack it?

Answer 1

You can make your fields readonly, this will disallow changes to the value of your controls.

Edit: You could easily write a "serializeDisabled" function, iterating over the disabled form elements which have a name attribute and using the jQuery.param function at the end, to generate the serialized string:

(function ($) {
  $.fn.serializeDisabled = function () {
    var obj = {};

    $(':disabled[name]', this).each(function () { 
        obj[this.name] = $(this).val(); 
    });
    return $.param(obj);
  }
})(jQuery);

Answer 2

First: I really like CMS's answer. Much simpler. But in case it's not the best option...

Why don't you just have a JQuery function tied to the form's onsubmit event that traverses the form and grabs the input for all <input>s in the form and enables them and then submits the form? Do you need to know if the input is disabled? Are you concerned that enabling the input will change the visual appearance in a way that concerns the user?

In either case you could add something to the elements that you are enabling. For styling, add a class that gives disabled inputs the same look as enabled inputs. Of if you need to know which were disabled, add something to either the name or the value itself to indicate the status.

Out of curiosity, when would you ever want the disabled info? If the input is always disabled (meaning the user didn't set it that way) don't you already know the value? And if the input is set to disabled by the user, aren't you being a bit deceptive collecting that data?

If the value is disabled because it's something like a "total" field which updates via js based on other non-disabled fields, I'd go with CMS on making it read-only instead.

---

Based on your response to CMS:

I can only imagine a few scenarios where a select box would be disabled but you'd want that passed back to the script. The main one that comes to my mind is that certain select boxes become enabled when other options are checked, but you would rather have the form pass back the default of the select box rather than have the server script deal with filling in the blanks.

If that's the case, why not set up a toggle between a hidden input and the select box? Have the value and name be the same for both inputs but if one is enabled, the other is disabled. This way the script only sees one of the two inputs, and since they have the same name it doesn't get caught on where the data came from.

---

$('form').submit(function() {
    $('[disabled]').each(function(i) {
        d_name = $(this).attr("name");
        d_val = $(this).val();
        $(this).after(
        '<input type="hidden" name="' + d_name + '" value="' + d_val + ' />'
        );
    });
return true;
});

Just in case you think I'm being too conceptual, here's a simple function that will run on user submit. Notice how it goes through each disabled element and adds a new hidden input into the DOM which has the same name and value has your hidden input, thus insuring that your server-side script can treat all input generically.

Answer 3

OK... perhaps I didn't ask my question clearly enough... but the answer I was looking for is here:

http://docs.jquery.com/Plugins:Forms#.val.28.29_becomes_.fieldValue.28.29

I mentioned ajaxSubmit() in my question, which comes from the jQuery Form plugin... and inside that plug-in there is a method called fieldValue() which accepts a parameter called "successful". If you pass in "true" then the plug-in only returns what the W3C defines as "successful" controls (which excludes disabled controls). but if you set it to false, then it will get all values, regardless of W3C definition.

I knew this was possible, since the entire submission is controlled by the plug-in and has nothing to do with the HTML standards/definition... I was just asking to see if this option was already available in this plug-in or other plugins. It is available in this plugin, although the default behavior is to act like a standard HTML submit

Answer 4

//jQuery('#container :input').serializeAll()

(function($j) {
  $j.fn.serializeDisabled=function(){
    var obj={};
    $j(this).filter(':input:disabled').each(function(index,domElem){
      var $this=$j(domElem);
      obj[domElem.name]=$this.val(); 
    });
    return $j.param(obj);
  };

  $j.fn.serializeAll=function(){
    $this=$j(this);
    return $this.filter(':input:enabled').serialize()+'&'+$this.serializeDisabled();
  };
})(jQuery);