禁用的表单输入不会出现在请求中

Question

我在表单中有一些禁用的输入,我想将它们发送到服务器,但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>

Answer 1

"已禁用元素"属性未提交,或者您可以说它们的值未发布(请参阅规范中步骤3中的第二个项目符号,以构建表单数据集).

也就是说,

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

仅供参考,

1. 禁用的控件无法获得焦点.
2. 标签导航中会跳过已禁用的控件.
3. 禁用的控件无法成功发布.

您可以readonly在您的案例中使用属性,这样您就可以发布您的字段数据.

也就是说,

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

仅供参考,

1. 只读元素获得焦点,但用户无法修改.
2. 标签导航中包含只读元素.
3. 只读元素已成功发布.

Answer 2

使用Jquery并使用ajax发送数据,您可以解决您的问题:

<script>

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

    //Rest of code
    })
</script>

Answer 3

如果您必须禁用该字段并传递数据,则可以使用javascript将相同的数据输入到隐藏字段中(或者也可以设置隐藏字段).这将允许您将其禁用但仍然发布数据,即使您要发布到另一个页面.

Answer 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 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 -->
}

Answer 5

我正在更新这个答案，因为它非常有用。只需将 readonly 添加到输入即可。

所以形式将是：

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