Get all form controls

[ShadowMage]

Is there an easy way to get an array of all form controls in a form? I know there is the elements property, but it also returns things like fieldsets. I only want to get a list of all elements that will have their values submitted to PHP. Will I have to write a loop that checks the tag name (or possibly some other attribute, like value) of each element?Advice is appreciated, thanks.

[jeffman]

You could assign a dummy classname and use form.getElementsByClassName. (I assume you have a homegrown getElementsByClassName function that you can add for you-know-who?)

[ShadowMage]

You could assign a dummy classname and use form.getElementsByClassName. (I assume you have a homegrown getElementsByClassName function that you can add for you-know-who?)

I do have a "homegrown getElementsByClassName" that I built using yours.However, I don't really want to do it this way because I already have everything built and it would require a lot of searching to add a dummy class to every form control I have. The HTML is generated by PHP and is split between two classes and several methods. I am currently using a form to submit to a different script, which takes the user to a different page, which then redirects the user back to the previous page when the database updating is complete. I am looking into using AJAX to submit the form so that the page does not have to reload. Perhaps there is an easier way to submit via AJAX than to loop through all the form controls and generate a query string?

[jeffman]

This is part of a more complex AJAX library object I forgot I wrote. See if it does what you want.

var i, data = "", el = this.elements, len = el.length;for (i = 0; i < len; ++i){	if (el[i].value && el[i].name){		if (!el[i].type.toLowerCase().match(/radio|checkbox|file/) || ((el[i].type.toLowerCase().match(/radio|checkbox/)) && el[i].checked)){			data += el[i].name + "=" + encodeURIComponent(el[i].value) + "&";		}	}}data = data.substr(0, data.length-1);

EDIT. If you haven't figured it out, this refers to your form element.

[ShadowMage]

Yes! That should work perfectly. Thanks, DD, you saved me the trouble of having to write a loop myself. :)So now how do I prototype that onto all form objects? Well, I know how to do that. I guess what I'm really asking is what is the form object called? Is it just Form? So it would be something like: Form.prototype.ajaxSubmit = function() {...}

[jeffman]

That should do it, I think. In my original, it was a method belonging to what I called an AJAX object. The constructor function accepted a form reference as an argument. No reason it couldn't be bound to arbitrary forms.

[ShadowMage]

Hmm....seems Form.prototype doesn't work. "Form is not defined" according to Firebug. :)EDIT: Solved! Need to use HTMLFormElement.Thanks for your help, DD!

[jeffman]

Wait! I'm stoopid. I just remembered that element prototyping is new and probably won't work on older browsers. It would be safer to loop through your forms to bind the function.

[ShadowMage]

Wait! I'm stoopid. I just remembered that element prototyping is new and probably won't work on older browsers. It would be safer to loop through your forms to bind the function.

That isn't an issue. The only two browsers I need to support are FF and IE. Most (probably all by now) of our users are on IE8 and FF 3. I'll be sure to keep that in mind though if I ever need to build an application that requires support for older browsers. I doubt I'll ever need to though (unless I get a different job) because all of my development is either for work or for my own personal use.

[jeffman]

Nice work if you can get it.