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

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

即，

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

FYI，

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

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

即，

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

FYI，

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

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>

Answer 6

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

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

Answer 7

从感觉上来说，这是正确的行为

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

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

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

从生成表单或
如果表单是动态的，则可以根据表单上的其他输入进行计算

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

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

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

很高兴得到纠正，但所有用例我可以想到需要在何处提交只读/禁用输入实际上只是变相的样式问题 < / p>

Answer 8

除了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)" })"

Answer 9

使用RGBA值定义颜色

在样式下添加以下代码

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

Answer 10

简单的解决方法-只需将隐藏字段用作选中，复选框和单选的占位符即可。

从此代码到-

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

Answer 11

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

所以你可以改为定期

<input text tag just before you have `/>

添加此内容 readonly="readonly"

它不会禁用您的文字，但不会被用户更改，因此它的工作方式与<p>类似，并会通过表单发送值。如果您想使其更像<p>标记

，请删除边框

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

11 个答案: