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

339

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

— 哈齐克
source

3

禁用输入

— 利亚姆

2

@Liam试图以质量较低的答案结束较少有人关注的问题，这是非常奇怪的尝试。

— hazzik 2015年

一个旧的少参加的问题。从技术上讲，应在询问时将此问题作为重复项予以关闭。我已经用mod标记了它可能进行合并，可能会或可能不会发生。由他们决定。

— 利亚姆

实际上，@ Liam的问题是不同的，即使某些答案看起来相似。我问如何使“禁用”字段提交值，而另一个问题问“原因”

— hazzik 2015年

我花了几个小时试图解决这个问题才到这里。恩..

— Matcheek '16

728

具有disabled属性的元素未提交，或者您可以说它们的值未发布（有关构建表单数据集的信息，请参见HTML 5规范第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：

只读元素获得焦点，但用户无法对其进行修改。
选项卡导航中包含只读元素。
只读元素已成功发布。

— 阿尔法男性
source

8

要回答我自己的问题：不，readony仅适用于type ='text'和type ='password'的<input />表单控件以及<textarea />。只读的作用是防止用户更改控件值。防止用户更改复选框的值（或单选类型的输入）没有多大意义……

— Muleskinner 2014年

3

@ danielson317您可以保持选择元素“禁用”，但也可以添加另一个具有相同值的隐藏输入。

— AlphaMale 2015年

1

@AlphaMale但是隐藏的元素不能具有相同的名称（或不应具有相同的名称）。我通过允许元素为空并仅从保存的表单状态中输入原始值来解决了这一问题。只是值得注意的是，只读在某些表单项上不起作用。

— danielson317

2

您是否曾经发现过什么并想：“到底是什么使他们认为这很明显？” 如果我遇到包括可能会或可能不会被禁用的输入字段的麻烦，那意味着我不希望用户更改它，不是说它应该有效地表现为好像从未声明过！

— 尼克·贝德福德

1

谢谢您，此举对您有所帮助，也为您提供了答案和答复。

— user1449249

24

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

<script>

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

    //Rest of code
    })
</script>

— 丽贝·图加
source

+1该解决方案的好处是，当用户在输入=上时，您仍然可以使用红色的禁用图标=）

— JMASTER B 2015年

5

@ArielMaduro，您可以使用CSS做到这一点cursor:not-allowed;

— sricks

@sricks哦，真的吗？你能举个例子吗？

— JMASTER B

之所以喜欢这种解决方案，不仅仅是使用只读，因为禁用的字段无法获得焦点

— Andreas

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

— 汤姆·布洛杰特
source

jquery选项上缺少引号之一

— cagcak

8

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

— 克里斯·皮尔斯
source

1

该解决方案是我一直使用的是什么-但是我刚刚得知-只读属性是一个更好的解决方案

— Muleskinner

4

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

因此，形式为：

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

— 利蒙
source

4

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

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

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

禁用输入中显示的任何值都应为

从产生表单的服务器上的值输出，或者
如果表单是动态的，则可以根据表单上的其他输入进行计算

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

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

我几乎争辩说，也不应该在请求中发送只读输入

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

— 阿尔特
source

1

别忘了它的价值可以直接通过chrome开发人员工具进行操作

— jimjim

2

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

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

— 埃里克·罗宾逊
source

-6

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

所以你可以放常规

<input text tag just before you have `/>

加上这个 readonly="readonly"

它不会禁用您的文本，但不会被用户更改，因此它的工作原理<p>将通过表格发送值。如果您想使其更像<p>标签，只需删除边框

— 阿敏MyCard
source