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

Disabled form inputs do not appear in the request

提问by hazzik

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

我在表单中有一些禁用的输入，我想将它们发送到服务器，但 Chrome 将它们从请求中排除。

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>

回答by AlphaMale

Elements with the disabledattribute 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).

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

I.e.,

IE，

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

FYI, per 17.12.1in the HTML 4 spec:

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

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

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

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

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

I.e.,

IE，

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

FYI, per 17.12.2in the HTML 4 spec:

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

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.

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

回答by LipeTuga

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

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

<script>

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

    //Rest of code
    })
</script>

回答by Tom Blodget

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:

如果你更喜欢 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:

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

回答by Chris Pierce

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.

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

回答by Limon

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

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

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>

回答by Arth

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

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

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 casesI can think of where read-only/disabled inputs need to be submitted are really just styling issues in disguise

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

回答by Erik Robinson

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.

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

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

回答by Amin MyCard

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

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

So you can instead put regular

所以你可以把常规的

<input text tag just before you have `/>

add this readonly="readonly"

添加这个 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

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