只有可见的 Div 表单元素才会被提交

Question

我使用 JavaScript 隐藏包含表单元素的 div：

<script type="text/javascript">
<!--
function showMe (it, box) {
    var vis = (box.checked) ? "block" : "none";
    document.getElementById(it).style.display = vis;
}
//-->
</script>

当选择某些复选框时，相应的 div 将显示或可见：

<form>
    <input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1
    <input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2
    <input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3
    <input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4
    <input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5
    <div class="row" id="div1" style="display:none">Show Div 1 <input type="text" name="valueone" id="valueone" /></div>
    <div class="row" id="div2" style="display:none">Show Div 2 <input type="text" name="valuetwo" id="valueone" /></div>
    <div class="row" id="div3" style="display:none">Show Div 3 <input type="text" name="valuethree" id="valueone" /></div>
    <div class="row" id="div4" style="display:none">Show Div 4 <input type="text" name="valuefour" id="valueone" /></div>
    <div class="row" id="div5" style="display:none">Show Div 5 <input type="text" name="valuefive" id="valueone" /></div>
    <br />
    <input type="submit" name="button" id="button" value="Submit" />
</form>

在上面如果我使用了 5 个 div 和 5 个输入，如果用户选择两个复选框并提交表单，我不希望其他 3 个输入字段以空字段提交。相反，只应提交选定的 2 个输入字段的值。

Answer 1

您可以尝试禁用空白字段，因为禁用的字段不会随表单一起提交。

Answer 2

这不是表单的工作方式。您需要：

• 修改输入的值（通常不好）或者...
• 操作 DOM 元素来修改表单的一部分以及不属于结构（而不​​是样式）级别的内容（非常糟糕）或者。 ..
• 将其分解为多个表单并仅提交您感兴趣的表单，或者...
• 在服务器端忽略您不感兴趣的信息，或者...
• 更改表单设计。

如果没有进一步的证据，我会选择后两者之一。

Answer 3

我只能想到两种方法来解决这个问题：

1. 检查服务器上复选框的值并忽略文本框值（但这些值仍将发送到服务器）
2. 未选中时，使用以下命令从表单中完全删除 div（或仅输入） JavaScript 并在选中复选框时将它们添加回来
3. 前一个版本的稍微修改版本将有另一个隐藏表单，您可以在未选中时移动 div。您需要从当前表单中删除元素，并在选中复选框时将它们移回 - 这样，您可以保留用户已填充到文本框中的值，但未选中时，这些值将不会与当前表单一起提交。