1

我正在编写一个按字段集划分的 HTML 表单，我需要从函数中的特定字段集中获取表单字段。
目前是这样的： 

function conta(Fieldset){  
    var Inputs = Fieldset.getElementsByTagName("input");  
    var Selects = Fieldset.getElementsByTagName("select");  
    /* Doing the stuff I need to do in two iterations, one for each field type */  
}

但是谁知道未来会发生什么，如果表单有一些新的字段类型（单选框、复选框），维护起来可能会变得很糟糕。
我知道form元素具有 elements返回所有表单字段的属性，我希望我可以使用类似的东西。
（我知道我仍然需要在迭代中的一堆条件中区分字段类型，但我认为它会更快更容易保持。除非它不是而且我不应该这样做）

4

6 回答 6

1

没有 jQuery，没问题：

function condat(fieldset) {
    var tagNames = ['input', 'select', 'textarea'];  // Insert other tag names here
    var elements = [];

    for (var i in tagNames)
        elements.concat(fieldset.getElementsByTagName(tagNames[i]);

    for (var i in elements) {
        // Do what you want
    }
}
于 2009-08-25T09:29:41.220 回答
1

如果您想使用 jQuery（我会），@Ryan 走在正确的轨道上，但我会建议更多类似的东西：

$('fieldset#fieldset1 > input[type=text]').each( function() {
      ... do something for text inputs }
 );

$('fieldset#fieldset1 > input[type=radio]').each( function() {
      ... do something for radios }
 );

$('fieldset#fieldset1 > select').each( function() {
      ... do something for selects }
 );

$('fieldset#fieldset1 > textarea').each( function() {
      ... do something for textareas }
 );

作为对 if-then-else 结构的改进。

于 2008-11-21T18:30:23.997 回答
1

单选按钮和复选框仍然是输入标签，将在 Inputs 变量中。问题是，您需要为选中状态添加处理程序以查看选择了哪些单选按钮和复选框。

更糟糕的是，您可以拥有多个具有相同名称的单选按钮和复选框……事实上，您必须使用单选按钮，否则它们不会按预期工作。

于 2008-11-21T18:30:49.750 回答
1

Filip Dupanović 解决方案与 Cargowire 的第二条评论一起为我工作，但仅进行了少量修改。Cargowire 的第二条评论只生成了一个数组，它只保存了 tagNames 数组的切片字符（我会在评论中写这个，但到目前为止我还没有代表）。

这是有效的：

function condat(fieldset) {
    var tagNames = ['input', 'select', 'textarea'];  // Insert other tag names here
    var elements = [];

    for (var i in tagNames) {
        elements = elements.concat([].slice.call(fieldset.getElementsByTagName(tagNames[i])));
    }
    for (var i in elements) {
        // Do what you want.
        // Attributes of the selected tag's can be referenced for example as 
        // elements[i].value = ...;
    }
}

一个有用的应用是定义仅重置字段集而不是整个表单的按钮。只需elements[i].value = elements[i].defaultValue;在//do what you want部分中使用，即可重置文本输入。当然，将 condat 函数绑定到提供 fieldset dom 元素作为参数的按钮的 onclick 事件上。

于 2017-11-02T07:43:15.910 回答
0

尚未对此进行测试并且不知道它是如何工作的，但是您可以在此处使用 JQuery 将所有元素选择到 JQuery 对象中

//$("input select textarea").each(function() {
$(":input").each(function() { //even better
    // do stuff here
});

这至少会清理代码，尽管您仍然必须像您提到的那样根据字段类型添加条件语句。

于 2008-11-21T18:25:32.990 回答
0

您应该只使用 querySelectorAll：

function condat(fieldset) {
   var elements = fieldset.querySelectorAll('input, select, textarea');
   elements.forEach(function(element){
     // Do what you want with every element
   });
}
于 2017-11-02T07:54:06.220 回答