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

У меня есть некоторые отключенные входы в форме, и я хочу отправить их на сервер, но 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>

Ответ 1

Элементы с отключенным атрибутом не отправляются или вы можете сказать, что их значения не размещены (см. вторую маркерную точку в разделе Step 3 в спецификация для построения форма данных).

т.е.

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

FYI,

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

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

т.е.

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

FYI,

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

Ответ 2

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

<script>

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

    //Rest of code
    })
</script>

Ответ 3

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

Ответ 4

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

<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 С# 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 -->
}

Ответ 5

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

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

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

Ответ 6

Существует действительно простой способ без использования script.

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

Вам просто не нужно использовать атрибут name.

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

И он не отправит входное значение. Чтобы убедиться, что я проверил это снова на IE11, Edge, Chrome и Firefox.

Ответ 7

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

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

<input text tag just before you have `/>

добавить это readonly="readonly"

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