Отправка значений отключенных полей в форме без 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.