javascript - How to get form fields from a specific fieldset? - Stack Overflow

admin管理员组

文章数量:1405621

I'm writing a HTML form that's divided in fieldsets, and I need to get the form fields from a specific fiedset in a function.
Currently it's like this:

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 */  
}

But who knows what the future may hold, and if the form gets some new field types (radios, checkboxes) this could bee awful to mantain.
I know that form elements have the elements attribute that returns all the form fields and I was hoping I could use something like that.
(I know I still gotta discriminate the field type in a bunch of conditionals inside the iteration, but I think it would be faster and easier to keep. Unless it isn't and I should not be doing it)

I'm writing a HTML form that's divided in fieldsets, and I need to get the form fields from a specific fiedset in a function.
Currently it's like this:

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 */  
}

But who knows what the future may hold, and if the form gets some new field types (radios, checkboxes) this could bee awful to mantain.
I know that form elements have the elements attribute that returns all the form fields and I was hoping I could use something like that.
(I know I still gotta discriminate the field type in a bunch of conditionals inside the iteration, but I think it would be faster and easier to keep. Unless it isn't and I should not be doing it)

• javascript
• forms
• dom
• xhtml

Share Improve this question Follow asked Nov 21, 2008 at 18:20 GabeGabe 1,2961414 silver badges4040 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

@Ryan is on the right track if you want to use jQuery (and I would), but I'd suggest something more along the lines of:

$('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 }
 );

As an improvement over if-then-else constructs.

Radio buttons and checkboxes are still input tags and will be in the Inputs var. The problem is, you'll need to add handlers for the checked state to see which radio buttons and checkboxes are selected.

Even worse, you can have more than one radio button and checkbox with the same name... in fact you have to for radio buttons or they don't work as expected.

No jQuery, no problem:

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

Filip Dupanović solution together with the second Cargowire ment worked for me, but only with a minor modification. Cargowire's second ment only produced an array which just holds the sliced characters of the tagNames array (I would have written this in a ment, but I lack the rep so far).

Here is what worked:

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 = ...;
    }
}

A usefull application of this would be to define buttons which only reset a fieldset instead of the whole form. Just use elements[i].value = elements[i].defaultValue; in the //do what you want part, for text inputs to be reseted. And of course bind the condat function onto the onclick event of the button providing the fieldset dom element as a paramenter.

Haven't tested this and don't know how it would work, but you could use JQuery here to select all the elements into a JQuery object

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

this would at least cleanup the code, although you would still have to add conditional statements based on field type like you mentioned.

You should use just querySelectorAll:

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

本文标签： javascriptHow to get form fields from a specific fieldsetStack Overflow