Отправка значений отключенных полей в форме без hidden input

Быстрый ответ

<input type="hidden" name="myField" value="disabledValue">

Чтобы при отправке формы были учтены значения недоступных полей, используйте скрытые поля. Для этого перенесите значение недоступного поля в скрытое, назвав его совпадающим с ожидаемым сервером атрибутом name.

Поведение браузеров и способы его обхода

Браузеры, например, Chrome, не учитывают недоступные элементы при отправке форм. Для того, чтобы их значения были засчитаны при отправке, используйте атрибут readonly.

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

Поля с атрибутом readonly не поддерживают редактирование, однако могут быть под фокусом и передают свои данные при отправке формы.

Обход ограничений для передачи данных полей

Если необходимо передать данные поля, не позволяя их редактировать, атрибут readonly станет отличным решением. Управлять полями в динамических формах можно с помощью JavaScript или jQuery прямо перед отправкой.

$('form').submit(function() {
  $(this).find(':disabled').prop('disabled', false); // Совет: убедитесь, что эти поля снова станут недоступны после отправки.
});

Данный код делает недоступные поля активными перед отправкой формы, обеспечивая тем самым их учёт в данных формы.

Воспользоваться возможностями сервера для управления данными полей

Серверные фреймворки, например, ASP.NET MVC с синтаксисом Razor, могут настроить формы так, чтобы данные всех полей участвовали в отправке, независимо от их состояния на клиенте.

@Html.HiddenFor(model => model.DisabledInputValue); // Синтаксис Razor!

Клонирование данных поля без его активации

В некоторых случаях активировать недоступное поле невозможно. В таком случае его данные можно скопировать в скрытое поле перед отправкой формы. Вот функция JavaScript, реализующая этот процесс:

function copyToHiddenField(inputElement) {
  var hiddenField = document.createElement('input');
  hiddenField.type = 'hidden';
  hiddenField.name = inputElement.name; 
  hiddenField.value = inputElement.value;
  form.appendChild(hiddenField);
}

Применение этой функции для каждого недоступного поля обеспечивает сохранность всех данных.

Управление процессом отправки данных с AJAX

Если стандартная отправка данных формы не обеспечивает полного контроля, можно воспользоваться AJAX.

var formData = new FormData();
formData.append('myField', $('#myDisabledField').val());
$.ajax({
  url: 'submitForm',
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  success: function(response) {
    // 🎉 Успех!
  }
});

С использованием AJAX можно учитывать значения из недоступных полей, не меняя при этом структуру формы.

Визуализация

Воспринимаем музыкальную группу как форму, где каждый участник — это элемент управления:

Участники группы: [Вокалист 🎤, Гитарист 🎸, Барабанщик 🥁]

Пусть вокалист заболел и не может выступать:

🎤 (Неактивный), 🎸, 🥁

При записи группы голос вокалиста отсутствует:

Запись 🎧: [🎸, 🥁]

Проблема решается с использованием скрытого трека.

Запись 🎧: [🎸, 🥁] + 🎤 (Скрытый трек)
# Группа звучит в полном составе!

Эффективное управление с помощью клиентского скрипта

Клиентский скрипт доступными средствами делает возможным учёт значений недоступных полей при отправке формы.

Учёт навигации по табуляции

Для удобства навигации используйте атрибут readonly с ивентом отправки при помощи JavaScript:

document.querySelector('form').addEventListener('submit', function(event) {
  var inputs = this.querySelectorAll('[readonly]');
  inputs.forEach(function(input) {
    input.removeAttribute('readonly');
  });
});

Обеспечение целостности данных

Обеспечьте целостность данных при помощи серверной валидации, так как пользователям доступно лишь копирование значений из полей readonly.

Учёт факторов доступности

Элементы с атрибутом readonly должны быть различимы для всех пользователей, включая тех, кто использует программы чтения с экрана.

Подробное ознакомление со стандартами HTML

Для более глубокого понимания темы рекомендуем ознакомиться со спецификациями HTML:

• HTML 4 подробно объясняет разницу между readonly и disabled. Поля с атрибутом readonly участвуют в навигации и отправке, в отличие от полей с атрибутом disabled.
• HTML 5 детализирует процесс создания набора данных формы, раскрывая процессы, включая ситуации с readonly полями.

Полезные материалы

1. Атрибут disabled HTML — Детальное описание атрибута disabled на MDN.
2. HTML спецификация — Официальный HTML стандарт WHATWG о роли недоступных элементов формы.
3. Атрибут disabled элемента input — Руководство от W3Schools с примерами использования disabled.
4. Доступность недоступных кнопок | CSS-Tricks — Статья про доступность элементов управления форм, находящихся в состоянии disabled.
5. Как отправить форму, когда select неактивен? | Stack Overflow — Обсуждение на Stack Overflow способов обеспечения отправки недоступного поля с использованием JavaScript.