What is the best way to submit disabled inputs as part of a JQuery AJAX request?

Question

I have a pretty complex form that provides real time validation and feedback to the user using it as they type in data. Parts of the form may be disabled due to form "business logic" of the inputs, but the server side needs to know the value of these disabled inputs to do some of its checking in the AJAX requests.

I was using JQuery to serialize the entire form $(form).serialize() and sending all of this data to the server during my AJAX requests, but this serialized data will be missing any inputs that are disabled. So what is the best way to include all of the form data (even disabled inputs) with each AJAX request?

My current thought is to attach a function to ajaxStart( callback ) that would create a client side hash-map of all form inputs' disabled attribute, enable all the inputs, serialize, and then set each form's disabled attribute back to its original value. But this seems overly complex and I wanted something simpler that wouldn't be as brittle.

Answer 1

Try doing something like this to serialize the form:

   $(function() {
      $('input[type=button]').click( function() {
          var form = $('form').serialize();
          $('input[disabled]').each( function() {
              form = form + '&' + this.id + '=' + $(this).val();
          });

      });
   });

Test HTML

<form action="/action">
   <input type='text' disabled='disabled' value='hey' id='hey' name='hey' />
   <input type='text' value='ho' id='ho' name='ho' />
   <input type='text' value="hi" id='hi' name='hi' />
   <input type='button' value="Serialize" />
</form>

Output

ho=ho&hi=hi&hey=hey

Answer 2

If your server accepts JSON, you can create a JSON object with jQuery (use jQuery select statements to include the necessary input tags), then send it to the server as an object - more information here: http://encosia.com/2009/04/07/using-complex-types-to-make-calling-services-less-complex/.

Basically, do something like this:

var formInputs = { };

$('input[type=text]').each(function() {
  formInputs[this.id] = this.value;
});