Question

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

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属性，它返回所有表单字段，我希望我可以使用类似的东西。
（我知道我仍然要在迭代中的一堆条件中区分字段类型，但我认为它会更快更容易保留。除非它不是，我不应该这样做）

Answer 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结构的改进。

Answer 2

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

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

Answer 3

没有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
    }
}

Answer 4

没有测试过这个并且不知道它是如何工作的，但你可以在这里使用JQuery来选择所有元素到JQuery对象中

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

这至少会清理代码，尽管你仍然需要根据你提到的字段类型添加条件语句。

Answer 5

FilipDupanović解决方案连同第二篇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函数绑定到按钮的onclick事件上，提供fieldset dom元素作为参数。

Answer 6

您应该只使用querySelectorAll：

function condat(fieldset) {
   var elements = fieldset.querySelectorAll('input, select, textarea');
   elements.forEach(function(element){
     // Do what you want with every element
   });
}

如何从特定字段集中获取表单字段？

6 个答案: