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

【问题标题】：ONLY Visible Div form elements will get submitted只有可见的 Div 表单元素将被提交
【发布时间】：2010-10-18 12:03:30
【问题描述】：

我已经使用 JavaScript 隐藏了包含表单元素的divs：

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

当某些复选框被选中时，相应的div(s) 会显示或可见：

<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 个 divs 和五个输入，如果用户选择两个复选框并提交表单，我不希望其他 3 个输入字段以空字段提交。而应该只提交选定的 2 个输入字段的值。

【问题讨论】：

标签： javascript html show-hide

【解决方案1】：

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

【讨论】：

确实这是个好主意。我一直在我的一些网络应用程序中使用它，并且它在我迄今为止测试过的所有浏览器中都有效。另一个好处是在 Firefox 中，当你重新加载一个页面时，<input disabled/> 会保留disabled 属性，所以用户数据不会丢失。

【解决方案2】：

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

修改输入值（通常是错误的）或...
操纵 DOM 元素以修改表单的一部分以及不在结构（而不是样式）级别（非常糟糕）或...
将其拆分为多个表单，然后提交您只感兴趣的一个或...
在服务器端忽略您不感兴趣的信息或...
更改表单设计。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：