禁用的表单输入未出现在请求中答案

【问题标题】：Disabled form inputs do not appear in the request禁用的表单输入未出现在请求中
【发布时间】：2011-11-13 12:13:33
【问题描述】：

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

【问题讨论】：

values of disabled inputs will not be submited?的可能重复
@Liam 以较低质量的答案结束参与人数较少的问题是非常奇怪的尝试。
一个 older 出席人数较少的问题。从技术上讲，这个问题在被问到时应该作为副本关闭。我已经用 mod 标记了它以进行潜在的合并，可能会也可能不会发生。这取决于他们。
@Liam 实际上问题是不同的，即使有些答案看起来很相似。我问如何使“禁用”字段提交值，另一个问题是关于“原因”
我花了几个小时试图解决它后才到这里。呃……

标签： html forms http browser

【解决方案1】：

简单的解决方法 - 只需使用隐藏字段作为选择、复选框和单选的占位符。

从这段代码到-

<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" /> 
    <select name="gender" disabled="disabled">
          <option value="male">Male</option>
          <option value="female" selected>Female</option>
    </select>

</form>

那个代码 -

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

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

    <input type="hidden" name="gender" value="female" />
    <select name="gender" disabled="disabled">
          <option value="male">Male</option>
          <option value="female" selected>Female</option>
    </select>
</form>

【讨论】：

【解决方案2】：

使用 RGBA 值定义颜色

在style下添加如下代码

<!DOCTYPE html>
<html>
<head>
<style>
#p7 {background-color:rgba(215,215,215,1);}
</style>
</head>
<body>

禁用灰色不透明

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

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

</form>

result

【讨论】：

【解决方案3】：

除了 Tom Blodget 的响应之外，您可以简单地添加 @HtmlBeginForm 作为表单操作，如下所示：

 <form id="form" method="post" action="@Html.BeginForm("action", "controller", FormMethod.Post, new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" })"

【讨论】：

你试过这个代码吗？因为我不知道它会如何工作。 @Html.BeginForm(...) {...} 渲染 <form ...> ... </form>，这在属性中并不是一件好事。也许您的意思是@Url.Action("action", "controller")，它会呈现一个 URL？
我试过这个代码，异端。它在这里工作。之前，我使用的是你提到的@Url.Action，但并不是所有的参数。也许“使用”更实用，但我不确定

【解决方案4】：

具有disabled 属性的元素未提交，或者您可以说它们的值未发布（请参阅the HTML 5 spec for building the form data set 中步骤 3 下的第二个要点）。

即，

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

仅供参考，根据 HTML 4 规范中的 17.12.1：

禁用的控件不会获得焦点。
在标签导航中跳过禁用的控件。
无法成功发布已禁用的控件。

您可以在您的情况下使用readonly 属性，通过这样做您将能够发布您的字段数据。

即，

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

仅供参考，根据 HTML 4 规范中的 17.12.2：

只读元素获得焦点，但用户不能修改。
只读元素包含在标签导航中。
已成功发布只读元素。

【讨论】：

回答我自己的问题：不，readony 仅适用于 type='text' 和 type='password' 的表单控件以及。 readonly 所做的是阻止用户更改控件值。阻止用户更改复选框的值（或单选类型的输入）没有多大意义......
@danielson317 您可以保持选择元素“禁用”，但也可以添加另一个具有相同值的隐藏输入。
你有没有发现一些东西并想，“到底是什么让他们认为这很明显？”可能会或可能不会被禁用，这意味着我不希望用户更改它，而不是它应该像从未声明过一样有效地行动！
谢谢您，这对您很有帮助，答案和响应都很好。
@NickBedford，尤其是当你想“哦，我可以通过添加 disabled 属性快速安全地处理这个问题。”

【解决方案5】：

在语义上这感觉像是正确的行为

我会问自己“为什么我需要提交这个值？”

如果您在表单上禁用了输入，那么大概您不希望用户直接更改值

在禁用输入中显示的任何值都应该是

从生成表单的服务器上的值输出，或
如果表单是动态的，可以从表单上的其他输入中计算出来

假设处理表单的服务器与为其提供服务的服务器相同，则在处理时应该可以使用所有用于重现禁用输入值的信息

事实上，为了保持数据完整性 - 即使禁用输入的值已发送到处理服务器，您也应该真正对其进行验证。 此验证需要与您无论如何都需要重现值相同级别的信息！

我几乎认为只读输入也不应该在请求中发送

很高兴得到纠正，但所有用例我能想到需要提交只读/禁用输入的地方实际上只是伪装的样式问题

【讨论】：

不要忘记它的值可以直接使用 chrome 开发者工具进行操作

【解决方案6】：

我发现这更容易。 readonly 输入字段，然后设置它的样式，以便最终用户知道它是只读的。放置在这里的输入（例如来自 AJAX）仍然可以提交，无需额外的代码。

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

【讨论】：

【解决方案7】：

除了启用的输入之外，要从禁用的输入中发布值，您只需在提交表单时重新启用所有表单的输入。

<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 选项缺少一个引号

【解决方案8】：

你完全可以避免禁用，这很痛苦，因为 html 表单格式不会发送任何与<p> 或其他标签相关的内容。

所以你可以改为常规

<input text tag just before you have `/>

添加这个 readonly="readonly"

它不会禁用您的文本，但不会由用户更改，因此它像<p> 一样工作，并将通过表单发送值。如果您想让它更像<p> 标签，只需删除边框

【讨论】：

【解决方案9】：

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

所以表格将是：

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

【讨论】：

【解决方案10】：

使用Jquery和ajax发送数据，可以解决你的问题：

<script>

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

    //Rest of code
    })
</script>

【讨论】：

+1 这个解决方案的好处是，当用户通过输入时，您仍然可以使用红色禁用图标 =)
@ArielMaduro 你可以使用 css cursor:not-allowed;
@sricks 哦，真的吗？？你能举个例子吗？
喜欢这个解决方案不仅仅是使用只读，因为禁用的字段无法获得焦点

【解决方案11】：

如果您绝对必须禁用该字段并传递数据，您可以使用 javascript 将相同的数据输入到隐藏字段中（或者也只设置隐藏字段）。这将允许您禁用它，但即使您要发布到另一个页面，仍然可以发布数据。

【讨论】：

这个解决方案也是我一直在使用的 - 但正如我刚刚了解到的 - 只读属性是一个更好的解决方案