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

问题描述 投票：0回答：14

我的表单中有一些禁用的输入，我想将它们发送到服务器，但 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>
html forms http browser
14个回答
870
投票

具有 

disabled
属性的元素不会提交，或者您可以说它们的值未发布（请参阅构建表单数据集的 HTML 5 规范中步骤 3 下的第二个要点）。

即，

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

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

  1. 禁用的控件不会获得焦点。
  2. 选项卡导航中会跳过禁用的控件。
  3. 禁用的控件无法成功发布。

您可以在您的情况下使用 

readonly
属性，通过这样做，您将能够发布字段的数据。

即，

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

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

  1. 只读元素获得焦点，但用户无法修改。
  2. 选项卡导航中包含只读元素。
  3. 只读元素已成功发布。
25
投票

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

<script>

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

    //Rest of code
    })
</script>
14
投票

要从已禁用的输入以及已启用的输入中发布值，您只需在提交表单时重新启用所有表单的输入即可。

<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 -->
}
9
投票

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

6
投票

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

所以表格将是：

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

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

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

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

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

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

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

  1. 生成表单的服务器上的值的输出，或
  2. 如果表单是动态的，可以根据表单上的其他输入进行计算

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

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

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

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

2
投票

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

从这段代码到-

<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>
1
投票

使用

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

或

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

如果您使用 PHP Laravel 这样的框架，没有 name 属性的元素将被读取为未设置

<input type="textbox" value="100" disabled/>
0
投票

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

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

0
投票

我遇到了完全相同的问题，但对我不起作用，因为我选择了 HTML 元素，并且它的只读状态允许更改其值。 所以我在一种条件下使用选择并在另一种条件下输入：

   <% If IsEditWizard Then   %>
                            <%For Each item In GetCompaniesByCompanyType("ResponsibleEntity")%>
                            <% If item.CompanyCode.EqualsIgnoreCase(prCompany.GetAsString("LinkedCompany")) Then   %>
                            <input type="text" value="<%: item.CompanyName  %>" tabindex="3" size="12" maxlength="12" readonly="readonly" />
                            <input type="hidden" id="LinkedCompany" name="LinkedCompany" value="<%:item.CompanyCode %>" tabindex="3" size="12" maxlength="12" />
                            <%End If %>
                            <%Next %>
                            <%Else %>
                            <select id="LinkedCompany" name="LinkedCompany" class="w-auto" <%= If(IsEditWizard, "disabled", "") %>>
                                <option value="">Please Select</option>
                                <%For Each item In GetCompaniesByCompanyType("ResponsibleEntity")%>
                                <option value="<%:item.CompanyCode %>" <%: IIf(item.CompanyCode.EqualsIgnoreCase(prCompany.GetAsString("LinkedCompany")), "selected", String.Empty) %>><%: item.CompanyName %></option>
                                <%Next %>
                            </select>

                            <%End If %>
0
投票

使用适当的样式将其设为只读：

<input name="client1" readonly> 

input:read-only {
   background-color: var(--bs-secondary-bg);
   ...
}
-7
投票

您完全可以避免禁用，这很痛苦，因为 html 表单格式不会发送与 

<p>
或其他标签相关的任何内容。

所以你可以改为放置常规

<input text tag just before you have `/>

添加这个 

readonly="readonly"

它不会禁用您的文本，但也不会被用户更改，因此它的工作方式类似于

<p>
，并且会通过表单发送值。如果您想让它更像 
<p>
标签

，只需删除边框即可
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.