如何停止提交表单div中的所有字段？

Question

我将表单分为两个部分：sec1 和 sec2。每个部分都是名为 sec1Div 和 sec2Div 的 div 的一部分。根据某些选择，div 之一被隐藏。但问题是隐藏部分中的字段仍然被提交。请建议一种方法，以便在提交时不会提交 div 中的所有字段。

Answer 1

有几种方法可以做到这一点。您可以将函数挂钩到表单submit的事件，也可以删除表单的name属性隐藏 div 内的字段。您还可以通过设置 disabled="disabled" 来禁用字段。

如果您使用 jQuery，您可以执行这些示例。

要禁用隐藏 div 中的所有字段，您可以执行以下操作：

function hideDiv(el) {
    $('input', el).each(function(){
        $(this).attr('disabled', 'disabled');
    });
    $(el).hide();
}

并且，适当的显示 div 函数：

function showDiv(el) {
    $('input', el).each(function(){
        $(this).removeAttr('disabled');
    });
    $(el).show();
}

请提醒，这只是一个代码示例。但你可以从中得到这个想法。

Answer 2

发生这种情况的原因是元素仍在 form 元素内。使用 CSS 隐藏 div 不会改变这一点 - 它们仍然存在于 DOM 中。

最简单的方法可能是向每个 div 添加一个隐藏的 input 字段，该字段可用于识别服务器端您应该处理哪个字段。然后，您可以简单地忽略隐藏表单中的数据。

如果您确实必须阻止数据被发布，这有点混乱，但您可以将隐藏的 div 的内容移到 form 元素之外，这样字段就不会'不提交。如果您想再次显示 div，则需要将字段移回原位。根据 CSS 的复杂程度，这可能会在某些浏览器中导致问题，因此我建议使用我的第一个建议。