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

html HTML

GO神乐

2020-03-23

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

第3081篇《禁用的表单输入未出现在请求中》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
斯丁前端 2020.03.23

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

<input readonly style="color: Grey; opacity: 1; ">
神乐Tom 2020.03.23

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

所以你可以放常规

<input text tag just before you have `/>

加上这个 readonly="readonly"

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

西里神奇 2020.03.23

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

伽罗 2020.03.23

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

我会问自己“ 为什么要提交这个值?

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

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

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

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

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

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

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

番长樱梅 2020.03.23

具有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. 只读元素已成功发布。
LEY乐 2020.03.23

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

因此,形式为:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android