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

Question

我正在隐藏/显示基于复选框状态的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';
    }
}

这是"有时隐藏"的div:

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

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

但是我怎么能这样做呢？

Answer 1

您可以将禁用的属性添加到您不想提交的任何字段.

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

Answer 2

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

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

这几乎总是更好地修改属性的元素,而不是属性,以及语义对于布尔属性更清晰,太.

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

残

此布尔属性表示表单控件不可用于交互.特别是,不会在禁用的控件上调度click事件.此外,表单不会提交禁用控件的值.

如果隐藏了type属性的值,则忽略此属性.

在Chrome 27中进行测试表明,Chrome 确实尊重该disabled属性并阻止提交hidden字段的表单值.

此外,W3C规范没有这样的区别.它只是说"控制disabled不能成功".