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