当前位置： 文江博客话题详情

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

发布于 2024-12-03 10:59:53 字数 352 浏览 3 评论 0原文

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

I have some disabled inputs in a form and I want to send them to a server, but Chrome excludes them from the request.

Is there any workaround for this without adding a hidden field?

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（14）

残疾 2024-12-10 10:59:53

具有 disabled 属性的元素不会提交，或者您可以说它们的值未发布（请参阅 用于构建表单数据集的 HTML 5 规范）。

即，

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

仅供参考，根据 17.12.1< HTML 4 规范中的 /a>：

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

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

即，

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

仅供参考，根据 17.12.2< HTML 4 规范中的 /a>：

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

Elements with the disabled attribute are not submitted or you can say their values are not posted (see the second bullet point under Step 3 in the HTML 5 spec for building the form data set).

I.e.,

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

FYI, per 17.12.1 in the HTML 4 spec:

  1. Disabled controls do not receive focus.
  2. Disabled controls are skipped in tabbing navigation.
  3. Disabled controls cannot be successfully posted.

You can use readonly attribute in your case, by doing this you will be able to post your field's data.

I.e.,

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

FYI, per 17.12.2 in the HTML 4 spec:

  1. Read-only elements receive focus but cannot be modified by the user.
  2. Read-only elements are included in tabbing navigation.
  3. Read-only elements are successfully posted.
回复 原文
一个人的夜不怕黑 2024-12-10 10:59:53

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

<script>

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

    //Rest of code
    })
</script>

Using Jquery and sending the data with ajax, you can solve your problem:

<script>

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

    //Rest of code
    })
</script>
回复 原文
哀由 2024-12-10 10:59:53

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

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

To post values from disabled inputs in addition to enabled inputs, you can simply re-enable all of the form's inputs as it is being submitted.

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

If you prefer 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>

For ASP.NET MVC C# Razor, you add the submit handler like this:

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 -->
}
回复 原文
﹏半生如梦愿梦如真 2024-12-10 10:59:53

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

If you absolutely have to have the field disabled and pass the data you could use a javascript to input the same data into a hidden field (or just set the hidden field too). This would allow you to have it disabled but still post the data even though you'd be posting to another page.

回复 原文
无人问我粥可暖 2024-12-10 10:59:53

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

所以形式将是：

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

I'm updating this answer since is very useful. Just add readonly to the input.

So the form will be:

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />
    <input type="textbox" name="Percentage" value="100" readonly/>
</form>
回复 原文
绾颜 2024-12-10 10:59:53

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

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

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

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

  1. 从生成表单的服务器上的值输出，或者（
  2. 如果表单是动态的）可以从表单上的其他输入计算

假设处理表单的服务器是同一个作为服务它的服务器，用于重现禁用输入值的所有信息都应该在处理时可用

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

我几乎认为只读输入不应在请求要么

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

Semantically this feels like the correct behaviour

I'd be asking myself "Why do I need to submit this value?"

If you have a disabled input on a form, then presumably you do not want the user changing the value directly

Any value that is displayed in a disabled input should either be

  1. output from a value on the server that produced the form, or
  2. if the form is dynamic, be calculable from the other inputs on the form

Assuming that the server processing the form is the same as the server serving it, all the information to reproduce the values of the disabled inputs should be available at processing

In fact, to preserve data integrity - even if the value of the disabled input was sent to the processing server, you should really be validating it. This validation would require the same level of information as you would need to reproduce the values anyway!

I'd almost argue that read-only inputs shouldn't be sent in the request either

Happy to be corrected, but all the use cases I can think of where read-only/disabled inputs need to be submitted are really just styling issues in disguise

回复 原文
友欢 2024-12-10 10:59:53

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

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

I find this works easier. readonly the input field, then style it so the end user knows it's read only. inputs placed here (from AJAX for example) can still submit, without extra code.

<input readonly style="color: Grey; opacity: 1; ">
回复 原文
紫﹏色ふ单纯 2024-12-10 10:59:53

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

从这段代码到 -

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

Simple workaround - just use hidden field as placeholder for select, checkbox and radio.

From this code to -

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

that code -

<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>
回复 原文
满天都是小星星 2024-12-10 10:59:53

使用适当的样式使其只读：

<input name="client1" readonly> 

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

Make it readonly with proper style:

<input name="client1" readonly> 

input:read-only {
   background-color: var(--bs-secondary-bg);
   ...
}
回复 原文
不知在何时 2024-12-10 10:59:53

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

In addition to Tom Blodget's response, you may simply add @HtmlBeginForm as the form action, like this:

 <form id="form" method="post" action="@Html.BeginForm("action", "controller", FormMethod.Post, new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" })"
回复 原文
柏拉图鍀咏恒 2024-12-10 10:59:53

使用

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

use

<input type="textbox" value="100" disabled/>
回复 原文
乞讨 2024-12-10 10:59:53

使用 RGBA 值定义颜色

在 style 下添加以下代码

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

Disabled Grey none tranparent

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

结果

Define Colors With RGBA Values

Add the Following code under style

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

Disabled Grey none tranparent

<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

回复 原文
屋檐 2024-12-10 10:59:53

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

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

I had exactly the same problem, but did not work for me, because I have select HTML element, and it's read-only state allowed to change its value.
So I used select in one condition and input in another:

   <% 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 %>
回复 原文
Bonjour°[大白 2024-12-10 10:59:53

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

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

所以你可以把常规的

<input text tag just before you have `/>

添加这个
readonly="readonly"

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

并将通过表单发送值。如果您想让它更像

标签，只需删除边框即可

You can totally avoid disabling, it is painful since html form format won't send anything related to <p> or some other label.

So you can instead put regular

<input text tag just before you have `/>

add this
readonly="readonly"

It wouldn't disable your text but wouldn't change by user so it work like <p> and will send value through form. Just remove border if you would like to make it more like <p> tag

回复 原文
~没有更多了~

关于作者

要走就滚别墨迹

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

娇女薄笑

文章 0 评论 0

biaggi

文章 0 评论 0

xiaolangfanhua

文章 0 评论 0

rivulet

文章 0 评论 0

我三岁

文章 0 评论 0

薆情海

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文