35

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?

4
  • 2
    Explain the series of events that you want the user to experience, then we can help you come up with a solution. There must be something else to the story, other wise there's no reason to use a select box if it's just going to be disabled.
    – TM.
    Aug 16, 2009 at 16:17
  • 2
    Here's one reason why we wanted this functionality (in a different project unrelated to OP). We have an AJAXed website which loads available options dynamically. In certain cases when different options can't be selected, we select one and disable the control. This needs to post back to the server because we need the setting. (Yes, theoretically, we could figure out what the value would be on the backend, but since the logic has already been done, there's no need to complicate things.) Feb 1, 2010 at 3:32
  • Well, I guess this is a dead conversation, but someone downvoted it, so I upvoted it. Feb 1, 2010 at 3:33
  • I'm not sure about his situation, but something similar has come up for me where in ASP.net MVC where I'm submitting a list of inputs, and some may be disabled (indicating no change in value) and others may be enabled (their value changed) But, when the form is submitted and parsed by the model binder, its convenient to see all values, not just the enabled ones. For me, that's where this would help
    – TJB
    Feb 1, 2010 at 3:37

8 Answers 8

39

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);
5
  • 9
    you can't make a <select> box readonly... yet another hack is required to make that work Aug 16, 2009 at 14:51
  • 11
    i want the value because I don't want to have to write special code for certain fields ("this field is a disabled/select so I have to get the value somewhere else"). I want consistent/concise code that puts values in the form and then when those fields are sent back I can use one set of code to read the values and be done. I want it to be generic. This post is not a discussion about concepts... I'm looking for an answer to my question Aug 16, 2009 at 15:15
  • 1
    I can certainly appreciate you not wanting to get too conceptual, but you want to know the answer that will a) not be a hack and b) do something that html doesn't do by default. And you want the answer to be as broad and generic as possible, which, if it was, you know full well that it would be native to HTML and you'd already know the answer. Before mentioning the select box, there was a simple answer (from CMS) yet your problem got more CONCEPTUALLY complicated with the select-box detail. Cool off and read the addendum to my answer.
    – Anthony
    Aug 16, 2009 at 15:25
  • 1
    but this isn't HTML... it's jQuery/ajax... and those libraries/plugins are just cycling through the DOM and grabbing fields... which could easily take an extra option which says "grab disabled fields as well". I suppose I should have asked it more specifically: is there an option for those plug-ins to not ignore disabled fields Aug 16, 2009 at 17:23
  • Well, my 4 line function essentially just says "grab disabled fields as well" by creating the hidden input with the same data. I am legitimately curious if that "unsuccessful" feature did what you wanted. With PHP, at least, POST data is identified by name, and the select element is what carries the name, not the option. So doesn't it show multiple instances of the same POST data? How do you know which one was selected? If you are giving each option a different name, that would be invalid and, in my opinion, a hack.
    – Anthony
    Aug 18, 2009 at 8:38
19

Why not simply enable all the disabled input fields right before the submission using .removeAttr() and .submit() .

$('#my_form').submit(function(){
    $("#my_form :disabled").removeAttr('disabled');
});
2
  • Why not simply enable all the disabled input fields right before the submission <-- Users will be able to see it briefly and it looks kind of lame. Jan 31, 2017 at 17:54
  • Yes, our application was working like this before I fixed it. Feb 15, 2019 at 12:46
5

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

0
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);
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.

4
  • thanks for your detailed reply. if we want to talk conceptually about things, then in windows forms you can always get the value of a field whether or not it is enabled/disabled. a field has a value... disabling it has nothing to do with the value it contains... but this is the web... and I have to deal with it. I have a form with fields and those fields have values.. one of which is a drop-down for a relationship that cannot be changed by user. but I want my life to be easy so I can just set the values in all fields and then post them (no hacks/tricks/workarounds). I think I'm doomed tho Aug 16, 2009 at 15:09
  • Is it really a drop-down if the user can't change it? Do they get one shot at it and then it's disabled, or was it ever something they could interact with? If they can't interact with it, then why not just have it as a normal input that's read-only? Something (I assume) must be setting it, and that something could just as easily fill in a text-input, right?
    – Anthony
    Aug 16, 2009 at 15:14
  • It's frustrating, I'm sure, that HTML doesn't do what you are used to from Windows. I get really annoyed that javascript can't do everything that PHP can. But that doesn't mean getting what you want is simple, nor does it make every solution a hack. You are using selects that, from what I can tell, aren't really selectable at all. Whatever way the drop down becomes selected and then disabled, simply pass the value to a hidden input. Either that or deal with the fact that you have chosen an input that isn't read-only and need to account for it in your server script.
    – Anthony
    Aug 16, 2009 at 15:29
  • I just did a test to be sure and the code in my answer does work. I was a bit nervous that the browser would not include any inputs added after the form was submitted (even though it is held up by the js function), but sure enough, the added inputs do appear as submitted data on the other end. Same name, same value, as promised.
    – Anthony
    Aug 16, 2009 at 16:46
1

You can also just re-enable the fields before submission using the following:

$('#form').submit(function() {
    $('[disabled]').each(function(i) {
        var d_name = $(this).attr("name");
        var d_val = $(this).val();
        $(this).attr("disabled", false);
    });
    return true;
});

$('#form').submit();
0

Enable all the disabled input fields right before the submission using Jquery

   $('form').submit(function(e) {
    $(':disabled').each(function(e) {
        $(this).removeAttr('disabled');
    })
});
-1

You can disable the inputs & before submitting the form you can re-enable them so the form will include them when posting to the server side

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.