Javascript 只有可见的Div表单元素将被提交

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

div

s：

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

---

在上面的例子中，我使用了5个带有5个输入的

div

s，如果用户选择两个复选框并提交表单，我不希望其他3个输入字段使用空字段提交。只应提交选定的2输入字段的值。

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

• 修改输入值（通常是坏的）或
• 操纵DOM元素来修改表单的一部分和不在结构（而不是样式）级别（非常糟糕）或
• 把它分成多个表格，然后只提交你感兴趣的表格，或者
• 在服务器端忽略您不感兴趣的信息，或者
• 改变你的表单设计

---

没有进一步的证据，我会跟后一个一起去。

你可以尝试禁用空白字段，因为禁用字段不提交表单。

< P>我只能想出两种方法来解决这个问题：

选中服务器上复选框的值并忽略文本框的值（但这些值仍将发送到服务器）

如果未选中此复选框，请使用JavaScript从表单中完全删除div（或仅删除输入），并在选中此复选框时重新添加它们

对上一个版本稍加修改后，将有另一个隐藏表单，在未选中时可以移动div。您需要从当前表单中删除元素，并在选中复选框时将其移回-这样，您可以保留用户已填充到文本框中的值，但如果未选中，这些值将不会随当前表单一起提交

---

事实上，这是一个好主意。我已经在我的一些网络应用程序中使用了它，到目前为止，它已经在我测试过的所有浏览器中运行。另一个adwandage是在Firefox中，当您重新加载页面时，

将保留

disabled

属性，因此用户数据不会丢失。

<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>