Disabled form inputs do not appear in the request

Understanding browser behavior & workarounds

User agent, Chrome, does not involve disabled inputs in form submissions. To make them part of form submission data, readonly attribute is the rescue tool.

<input type="text" name="myField" value="valueYouCannotChange" readonly>


The readonly fields are non-editable yet retain their ability to grab focus and feature in form submission data.

Tricking form into including data

In scenarios where you must include a certain field's data into submission without allowing it to undergo changes, the readonly attribute works as magic. Flexible fields in dynamic forms can be managed with JavaScript or jQuery just before the form submission hits.

$('form').submit(function() {
  $(this).find(':disabled').prop('disabled', false); //🔥 Pro tip: burn some midnight oil and make sure you re-disable them later
});


Above code block re-enables the disabled inputs ensuring their submission along with the form data.

Embracing server-power to manage field data

Server-oriented frameworks like ASP.NET MVC with Razor syntax can twist and twirl the form into including all input data, oblivious to whatever state the client-side might be in.

@Html.HiddenFor(model => model.DisabledInputValue); // Razor-sliced form! It works🍎


Clone field data without field activation

There can be situations where field activation is just not an option. In these, consider transferring its data into a hidden field just prior to form submission. Here's a JavaScript helper function for the task:

function copyToHiddenField(inputElement) {
  var hiddenField = document.createElement('input');
  hiddenField.type = 'hidden';
  hiddenField.name = inputElement.name; // 🕵️‍♀️ Found an imposter, but it's for a good cause
  hiddenField.value = inputElement.value;
  form.appendChild(hiddenField);
}


Invoking this function for every disabled input will ensure that no data is left out.

Taking control with AJAX

If form submissions feel restricting, don't fear! AJAX lets you have full authority over form data submission:

var formData = new FormData();
formData.append('myField', $('#myDisabledField').val());
$.ajax({
  url: 'submitForm',
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  success: function(response) {
    // 🎉 Celebrations in order? Or...not yet?
  }
});


With AJAX, you can safely include values from disabled inputs without morphing the form structure using additional hidden fields.

Effective management with client-side scripting

Apply client-side scripting to smartly include disabled input values in form submissions.

Considering tabulation navigation

To maintain the smooth tab navigation, manipulate the readonly attribute in the form submission event with a JavaScript code:

document.querySelector('form').addEventListener('submit', function(event) {
  var inputs = this.querySelectorAll('[readonly]');
  Array.prototype.forEach.call(inputs, function(input) {
    input.removeAttribute('readonly'); // 🎩 A magic trick!
    // Again, you could add a hidden field here if the backend needs to sniff out readonly fields
  });
});


Ensuring data integrity

User has the ability to select and copy values of the read-only fields. To ensure data integrity, impose proper server-side validations.

Addressing accessibility factors

When working with accessibility, it's necessary that elements with readonly attribute should be distinguishable for all users, including the ones using screen readers.

Deep-diving into HTML standards

For better understanding, consult the HTML specifications:

• HTML 4 spec provides a detailed view of how readonly and disabled behave differently. Readonly fields are included in tabbing navigation and get posted successfully, while disabled do not.
• HTML 5 spec elaborates on building a form data set, shedding light on what really happens under the hood, including what happens for inputs marked as readonly.