从提交中排除隐藏的表单字段

Exclude hidden form fields from submit

本文关键字：表单 字段 隐藏 排除 提交      更新时间：2023-09-26

我正在隐藏/显示一个基于复选框状态的div。

<input type="checkbox" id="other" name="os[other]" value="6" onclick="toggle_form_element('os[other]')">
这是我的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';
    }
}

这是"sometimesHidden"div:

<div id="sometimesHidden">
    <input type="text" size="20" id="other_os" name="other_os">
</div>

现在我想使用我的toggle_form_element函数也用于从$_POST['array']中排除"hidden"div中的所有输入字段。

但是我该怎么做呢?

您可以为任何不想提交的字段添加禁用属性。

function toggle_form_element(id) {
    if ((document.getElementsByName(id)[0].checked)) {
        document.getElementById('sometimesHidden').setAttribute("disabled", "disabled");
    } else {
        document.getElementById('sometimesHidden').removeAttribute("disabled");
    }
}

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");
}

您可以直接在元素上设置.disabled属性:

function toggle_form_element(name) {
    var state = document.getElementsByName(name)[0].checked;
    document.getElementById('sometimesHidden').disabled = state;
}

修改元素的属性总是比修改属性好，而且布尔属性的语义也更清晰。

请注意，虽然MDN建议在隐藏字段中忽略此属性:

禁用

此布尔属性表示表单控件不可用于交互。特别是，将不会在禁用控件上分派单击事件。此外，禁用控件的值不会随表单一起提交。

如果type属性的值是隐藏的，则忽略该属性。

在Chrome 27中的测试表明，Chrome 尊重disabled属性，并防止提交hidden字段的表单值。

而且，W3C规范没有这样的区别。它只是说"disabled控制不能成功"。

相关文章：