Form element arrays

[lemmin]

I have a form that has multiple select objects that are all names "cats[]". When I submit the form, an array is sent with each value that was selected from all of the select objects. Similarly, (on the same page or a different one) I created a set of selects dynamically using createElement() and manually set the name property to "cats[]". When I submit the form with these elements, an array is sent, but only the value of the last select object is in the array.

 

Does anyone have any idea why this would happen?

[KevinM1]

Mind showing some code?  There could be a small difference between the way the dynamic selects are handled compared to the non-dynamic (static?) selects that you may not be seeing.

[lemmin]

The NAME attribute cannot be set at run time on elements dynamically created with the createElement method. To create an element with a NAME attribute, include the attribute and value when using the createElement method.

 

I started outputting the innerHTML after creating the objects and realized the name property was only being set as a custom attribute of the object and not as the actual property. I never would have figured out why if it weren't for the good old MSDN!

 

 

[lemmin]

Just when I thought everything was going to work out...

Aparently you cannot specify anything but the tag name when using createElement() in Firefox, so the solution that fixes the problem in IE completely breaks Firefox.

 

Any ideas on a workaround for this without checking for the browser type?

 

Thanks.

[obsidian]

What's wrong with just setting the value manually when the element is created?

var ele = document.createElement('input');
ele.setAttribute('name', 'cats[]');

 

Then, add your element to your form.

[lemmin]

My quote above explains that it isn't allowed. Like I said, it sets a custom attribute with the name, "name" to that value, which fakes it, but it doesn't become an array when it is done that way. Thanks for the idea, though.

[obsidian]

Have you tried accessing the name attribute directly? I know that you can retrieve the name value doing this, and I set the name value this way in our CMS at work:

var ele = document.createElement('input');
ele.name = 'cats[]';

[lemmin]

Yes, it works to set a name value and PHP sees it correctly as a name; however, when it is set manually, it won't parse as an array. As soon as I changed the creating code to this:

document.createElement('<SELECT name=\'cats[]\'></SELECT>');

Everything worked perfectly in IE.