Question

我有一个大的表单，用div分隔成不同的部分。每个部分都在同一个表单（bigform）中，我需要确保一次只启用/编辑一个部分。如果用户在将数据输入一个部分后更改了部分，则在禁用之前将从旧部分清除所有数据。对我来说，理想的方法是拥有这样的东西：

<form>
    <select name="selector">
        <option>Choose Which Div To Enable</option>
        <option value='1'>One</option>
        <option value='2'>Two</option>
        <option value='3'>Three</option>
    </select>
</form>


<form name="bigform">
    <div id="1">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>

    <div id="2">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>

    <div id="3">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>
</form>

当用户在选择器表单中选择选项“Two”时，DIV 1和3中的所有表单元素都将被禁用。我在网上搜索了几个小时，但我找不到解决方案。实现这一目标的最佳方法是什么？

我在网上发现这个代码几乎是“我想要的但不完全”。它“切换”给定元素（el）中的表单元素。我想要做的就是与此相反。

    <form>
        <select name="selector" onChange="toggleDisabled(document.getElementByID(this.value))>
            <option>Choose Which Div To Enable</option>
            <option value='1'>One</option>
            <option value='2'>Two</option>
            <option value='3'>Three</option>
        </select>
    </form>
<script>
function toggleDisabled(el){
    try {
        el.disabled = el.disabled ? false : true;
    }
    catch(E){}

    if (el.childNodes && el.childNodes.length > 0) {
        for (var x = 0; x < el.childNodes.length; x++) {
            toggleDisabled(el.childNodes[x]);
        }
    }
}
</script>

Answer 1

一种解决方法没有使用脚本库，如jQuery：

function disableFormFields(container, isDisabled) {
  var tagNames = ["INPUT", "SELECT", "TEXTAREA"];
  for (var i = 0; i < tagNames.length; i++) {
    var elems = container.getElementsByTagName(tagNames[i]);
    for (var j = 0; j < elems.length; j++) {
      elems[j].disabled = isDisabled;
    }
  }
}

<select name="selector" onchange="partiallyDisableForm(this)">
  <!-- give every option a numeric value! -->
  <option value='0'>Choose Which Div To Enable</option>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>

function partiallyDisableForm(selector) {
  // don't forget to give your form the ID "bigform"
  var form = document.getElementById("bigform");
  var parts = form.getElementsByTagName("DIV");

  for (var i = 0; i < parts.length; i++) {
    var part = parts[i];
    // give your form parts the ID "formpart_1" through "formpart_3"
    if (part.id.match(/^formpart_\d+$/)) {
      // you must implement what to do if selector.value is 0
      var isDisabled = (part.id != "formpart_" + selector.value);
      disableFormFields(part, isDisabled);
    }
  }
}

Answer 2

当用户在选择器表单中选择选项“Two”时，DIV 1和3中的所有表单元素都将被禁用。因此，当用户提交“bigform”时，只会提交div 2中的值。

没有。无论在UI中禁用哪些元素，表单都将始终作为整体提交。

如果您只想提交一组表单项，请为每个表单创建一个单独的表单。

Answer 3

不可能阻止某些输入元素被提交，并且在服务器端进行选择性保存可能更安全/更容易，因为如果JS破坏/被泄露，它将阻止错误的结果被保存。

您可以禁用未提交的元素，也可以更改其名称属性，以确保服务器不使用这些值。

您还可以为提交按钮指定名称/值，并在服务器端解析它。使用Javascript在提交按钮中设置一个值来告诉服务器端只有所需的按钮，这将是微不足道的。

Answer 4

所以你有N个部分的id为1..N，你只想要第i部分是活跃的吗？

如果你把它放在那个措辞中，我会把它编码得像这样 - 记住：我的jQuery不是那么强大，我只是伪jquerying：

function enable( element, sensitive ) {
   //recursively disable this node and it's children       
   element.disabled = !sensitive;
   if( element.childNodes ) {
      for( var i = 0; i != element.childNodes.length; ++i ) {          
       enable( element.childNodes[i], sensitive );
      }
   }
}

// this function should rely on the structure of your document
// it ought to visit all sections that need to be enabled/disabled
function enableSection( i ) {
   $("#bigform > div").each( function( index, element ) {
       enable( element, index==i );
   });
}

$("#sectionselector").change( function( ) {
   // find value of active section
   var activesection = $("#sectionselector").value; // or the like
   enableSection( activesection );
} );

在所选Div中禁用所有表单元素（已编辑）

4 个答案: