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（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个div和5个输入，如果用户选择了两个复选框并提交表单，我不希望其他3个输入字段被提交为空字段。而应仅提交2个输入字段的值。

Answer 1

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

Answer 2

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

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

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

Answer 3

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

检查服务器上复选框的值并忽略文本框值（但值仍会发送到服务器）
取消选中后，使用JavaScript从表单中完全删除div（或只是输入），并在选中复选框时将其添加回来
上一个版本的略微修改版本将是另一个隐藏的表单，您可以在未选中时移动div。您需要从当前表单中删除元素并在选中复选框时将其移回 - 这样，您可以保留用户已填充到文本框中的值，但如果未选中，则不会使用当前表单提交值。

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

3 个答案: