javascript 从提交中排除隐藏的表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16808799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Exclude hidden form fields from submit
提问by emjay
I'm hiding/showing a div based on the state of a checkbox.
我正在根据复选框的状态隐藏/显示一个 div。
<input type="checkbox" id="other" name="os[other]" value="6" onclick="toggle_form_element('os[other]')">
Here is my Javascript Function:
这是我的 Javascript 函数：
function toggle_form_element(id) {
if ((document.getElementsByName(id)[0].checked)) {
document.getElementById('sometimesHidden').style.display = 'block';
} else {
document.getElementById('sometimesHidden').style.display = 'none';
}
}
This is the "sometimesHidden" div:
这是“有时隐藏”的 div：
<div id="sometimesHidden">
<input type="text" size="20" id="other_os" name="other_os">
</div>
Now I would like to use my toggle_form_element function also for excluding all the input fields in the "hidden" div from the $_POST['array'].
现在我想使用我的 toggle_form_element 函数来从 $_POST['array'] 中排除“隐藏”div 中的所有输入字段。
But how can I do this?
但是我该怎么做呢？
回答by CodingIntrigue
You can add a disabledattribute to any fields you don't want to submit.
您可以向不想提交的任何字段添加禁用属性。
function toggle_form_element(id) {
if ((document.getElementsByName(id)[0].checked)) {
document.getElementById('sometimesHidden').setAttribute("disabled", "disabled");
} else {
document.getElementById('sometimesHidden').removeAttribute("disabled");
}
}
For a jQuery solution:
对于 jQuery 解决方案：
// Disables all input, select & textarea tags within the .sometimesHidden div
if(checked) {
$("input, select, textarea", $(".sometimesHidden")).attr("disabled", "disabled");
}
else {
$("input, select, textarea", $(".sometimesHidden")).removeAttr("disabled");
}
回答by Alnitak
You can directly set the .disabledproperty on the element:
您可以直接.disabled在元素上设置属性：
function toggle_form_element(name) {
var state = document.getElementsByName(name)[0].checked;
document.getElementById('sometimesHidden').disabled = state;
}
It's almost always better to modify the propertiesof an element rather than the attributes, and the semantics are clearer for boolean properties, too.
这几乎总是更好地修改属性的元素，而不是属性，以及语义对于布尔属性更清晰，太。
Note that while MDN suggests that this property is ignored on hidden fields:
请注意，虽然 MDN 建议在隐藏字段上忽略此属性：
disabled
This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.
This attribute is ignored if the value of the type attribute is hidden.
残疾
此布尔属性指示表单控件不可用于交互。特别是，不会在禁用的控件上调度 click 事件。此外，禁用控件的值不会随表单一起提交。
如果隐藏 type 属性的值，则忽略此属性。
testing in Chrome 27 shows that Chrome doeshonour the disabledattribute and prevent submission of form values for hiddenfields.
Chrome 27 中的测试表明 Chrome确实支持该disabled属性并阻止提交hidden字段的表单值。
Furthermore, the W3Cspec makes no such distinction. It simply says that "Controls that are disabledcannot be successful".
此外，W3C规范没有做出这样的区分。它只是说“disabled不能成功的控制”。
