如何避免将display：none隐藏的输入字段发送到服务器？

88

想象一下，您有一个表单，可以在其中切换几个字段的可见性。而且，如果未显示该字段，则您不希望请求该字段的值。

您如何处理这种情况？

html http field

— glaz666
source

128

将表单元素设置为禁用将停止将其发送到服务器，例如：

<input disabled="disabled" type="text" name="test"/>

在javascript中，这将意味着：

var inputs = document.getElementsByTagName('input');
for(var i = 0;i < inputs.length; i++) {
    if(inputs[i].style.display == 'none') {
        inputs[i].disabled = true;
    }
}
document.forms[0].submit();

在jQuery中：

   $('form > input:hidden').attr("disabled",true);
   $('form').submit();

— karim79
source

16

使用jQuery的伪选择器:input代替，input您还可以轻松禁用allselect和textareaelements

— Daniel Rikowski 2012年

8

在jQuery> = 1.6中，而不是attr("disabled", true)您应该使用prop("disabled", true) api.jquery.com/prop

— yorch

2

@ dominicbri7-从jQuery 1.6开始，建议使用.prop()代替代替.attr()来获取和设置禁用属性和选中属性。.attr()在某些情况下，检查和/或设置使用将返回不良结果。在评论yorch所指的内容之前，请先阅读jQuery文档。

— zgr024 2013年

@ zgr024好，删除了我的评论

— dominicbri7

2

@DanielRikowski，这是什么jQuery，这里的jQuery毫无意义。让我们谈谈Vanilla JS。

— Pacerier，2015年

13

您可以使用javascript设置Disabled属性。“提交”按钮单击事件可能是执行此操作的最佳位置。

但是，我建议不要这样做。如果可能，您应该在服务器上过滤查询。这样会更可靠。

— 本尼迪克特·科恩（Benedict Cohen）
source

7

如果要禁用隐藏的父元素中的所有元素或某些元素，则可以使用

$("div").filter(":hidden").children("input[type='text']").attr("disabled", "disabled");

此示例http://jsfiddle.net/gKsTS/禁用隐藏div中的所有文本框

— 马西奥·俊
source

这是一个非常好的解决方案，因为它会遍历隐藏的div并禁用所有。它应该获得更多+1

— 2016年

6

关于什么：

$('#divID').children(":input").prop("disabled", true); // disable

和

$('#divID').children(":input").prop("disabled", false); // enable

在隐藏的div中切换所有子级输入（选择，复选框，输入，文本区域等）。

— 安东尼奥·马克斯
source

如果要获取所有输入，这是一个很好的解决方案。好工作

— doz87 '16

3

一种非常简单（但并非总是最方便的解决方案）的方法是删除“名称”属性-该标准要求浏览器不要发送未命名的值，并且我所知道的所有浏览器都遵守此规则。

— 萨尔瓦塔
source

4

不建议这样做，因为如果您通过javascript更改状态，则几乎不重置所有输入而无需缓存所有名称属性。切换禁用状态更容易。

— 西蒙（Simon）

1

我要么从输入中删除值，要么从DOM中分离输入对象，因此不存在要首先发布的对象。

— JMP
source