Отключенные формы ввода не отображаются в запросе


340

У меня есть некоторые отключенные входы в форме, и я хочу отправить их на сервер, но Chrome исключает их из запроса.

Есть ли обходной путь для этого без добавления скрытого поля?

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />

    <!-- this does not appear in request -->
    <input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

</form>


2
@Liam - это очень странная попытка закрыть вопрос в пользу менее посещаемого вопроса с более низкими качественными ответами.
Хаззик

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

@ Лиам на самом деле вопросы разные, даже некоторые ответы выглядят одинаково. Я спрашиваю о том, как сделать «отключенным» поле для отправки значений, и еще один вопрос о «причинах»
hazzik

Попал сюда только после того, как я потратил несколько часов, пытаясь ее решить. Эххх ..
matcheek

Ответы:


731

Элементы с disabledатрибутом не отправляются, или вы можете сказать, что их значения не публикуются (см. Второй пункт в разделе Шаг 3 в спецификации HTML 5 для создания набора данных формы ).

То есть,

<input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

К вашему сведению, в соответствии с 17.12.1 в спецификации HTML 4:

  1. Отключенные элементы управления не получают фокус.
  2. Отключенные элементы управления пропускаются во вкладках навигации.
  3. Отключенные элементы управления не могут быть успешно опубликованы.

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

То есть,

<input type="textbox" name="Percentage" value="100" readonly="readonly" />

К вашему сведению, в соответствии с 17.12.2 в спецификации HTML 4:

  1. Элементы только для чтения получают фокус, но не могут быть изменены пользователем.
  2. Элементы только для чтения включены в навигацию по вкладкам.
  3. Элементы только для чтения успешно опубликованы.

8
Чтобы ответить на мой собственный вопрос: Нет, readony работает только для <input /> управления формами type = 'text' и type = 'password' и для <textarea />. То, что делает readonly, не позволяет пользователю изменять значение элементов управления. Предотвращение изменения пользователем значения флажка (или ввода типа radio) не имеет большого смысла ...
Muleskinner

3
@ danielson317 Вы можете оставить элемент выбора «отключенным», но также можете добавить еще один скрытый ввод с тем же значением.
AlphaMale

1
@AlphaMale Но скрытый элемент не может иметь одно и то же имя (или не должен). Я прошел мимо этого, позволив элементу быть пустым, и просто извлек исходное значение из сохраненного состояния формы. Стоит только отметить, что readonly не работает с выбранными элементами формы.
danielson317

2
Вы когда-нибудь узнаете что-нибудь и думаете: «Что, черт возьми, заставило их думать, что это будет очевидно?» Если я пойду на проблему с включением поля ввода, которое может или не может быть отключено, это означает, что я не хочу, чтобы пользователь изменил его, а не то, что оно должно эффективно действовать так, как будто оно никогда не было объявлено вообще!
Ник Бедфорд

1
Спасибо, это было полезно, и ответ, и ответ.
user1449249

25

Используя Jquery и отправляя данные с помощью ajax, вы можете решить вашу проблему:

<script>

$('#form_id').submit(function() {
    $("#input_disabled_id").prop('disabled', false);

    //Rest of code
    })
</script>

+1 хорошо в этом решении то, что вы все еще можете использовать красный значок отключения, когда пользователь над вводом =)
JMASTER B

5
@ArielMaduro вы можете сделать это с помощью csscursor:not-allowed;
sricks

@ Sricks О, действительно ?? Можете ли вы привести пример?
JMASTER B

нравится это решение больше, чем использование только для чтения, потому что отключенные поля не могут получить фокус
Андреас

9

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

<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

Если вы предпочитаете JQuery:

<form onsubmit="$(this).find('input').prop('disabled', false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

Для ASP.NET MVC C # Razor вы добавляете обработчик отправки следующим образом:

using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
    // Re-enable all input elements on submit so they are all posted, even if currently disabled.
    new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
    <!-- form content with input elements -->
}

отсутствует одна из цитат по опции jquery
cagcak

8

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


1
Это решение - то, что я тоже использовал - но, как я только что узнал, свойство readonly - гораздо лучшее решение
Muleskinner

4

Я обновляю этот ответ, так как он очень полезен. Просто добавьте readonly к входу.

Таким образом, форма будет:

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />
    <input type="textbox" name="Percentage" value="100" readonly/>
</form>

4

Семантически это похоже на правильное поведение

Я хотел бы спросить себя: « Почему мне нужно представить это значение? "

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

Любое значение, отображаемое в отключенном входе, должно быть

  1. вывод значения на сервере, который создал форму, или
  2. если форма является динамической, рассчитывается на основе других входных данных в форме

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

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

Я бы почти утверждал, что входные данные только для чтения не должны отправляться в запросе

Рад, что меня исправили, но все варианты использования, в которых я могу представить вводные данные только для чтения / отключенные, на самом деле являются скрытыми проблемами стиля


1
не забывайте, что этим значением можно напрямую управлять с помощью инструментов разработчика Chrome
jimjim

2

Я считаю, что это работает проще. только для ввода в поле ввода, а затем стиль, чтобы конечный пользователь знал, что это только для чтения. размещенные здесь данные (например, из AJAX) можно отправлять без дополнительного кода.

<input readonly style="color: Grey; opacity: 1; ">

-6

Вы можете полностью избежать отключения, это болезненно, поскольку формат HTML не отправляет ничего, связанного с <p> какой-либо другой меткой.

Таким образом, вы можете вместо этого поставить регулярный

<input text tag just before you have `/>

Добавь это readonly="readonly"

Он не отключит ваш текст, но не изменится пользователем, поэтому он будет работать как <p>и будет отправлять значение через форму. Просто удалите границу, если хотите сделать <p>тег больше похожим на тег

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.