How do I get form fields from a specific set of fields?
I am writing an HTML form split in fields and I need to get the form fields from a specific fiedset in a function.
It currently looks 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 be, and if new types of fields (radio, checkboxes) appear in the form, it can become terrible for mantain. I know that elements form
have an attribute elements
that returns all form fields, and I was hoping I could use something like this.
(I know that I still have to distinguish between the field type in a bunch of conditional units within the iteration, but I think it will be faster and easier to save. If it is not, and I shouldn't do it)
source to share
@Ryan is on the right track if you want to use jQuery (and I would), but I would suggest something more line by line:
$('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.
source to share
Radio buttons and checkboxes are still tagged and will appear in var tabs. The problem is that you will need to add handlers for the checked state to see which radio buttons and checkboxes are checked.
Moreover, you may have more than one radio button and checkbox with the same name ... in fact you must be using radio buttons or they do not work as expected.
source to share
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
}
}
source to share
Haven't tested this and didn't know how it would work, but you can use JQuery here to select all elements into a JQuery object
//$("input select textarea").each(function() {
$(":input").each(function() { //even better
// do stuff here
});
this will at least clean up the code, although you still have to add conditional statements based on the field type as you mentioned.
source to share
Filip Dupanović's solution together with Cargowire's second comment worked for me, but with only minor modification. Second comment by Cargowire created an array that just contains the sliced characters of the tagNames array (I would write that in a comment, but I am still missing the rep).
Here's 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 can be referenced for example as
// elements[i].value = ...;
}
}
A useful application of this would be to define buttons that only reset a bunch of fields instead of the entire form. Just use elements[i].value = elements[i].defaultValue;
in part //do what you want
so that text inputs are cleared. And of course, bind the condat function to the onclick event of the button, providing the domset dom element as a paragraph.
source to share