problems with php $ POST and IE

when generating form elements with js

[spaceboy]

Hello
I've got a form with elements, and the option of adding more elements to it. This is done with js, and it works fine. The elements' names have [], so php treats them as arrays.
Example:

<select name="p_st_size[]" class="small" id="p_st_size"> 

If i do a print_r($_POST) (with php) after the form's been submited,
in firefox, it shows all the $_POST variables.
In IE7 it'll show me just the elements created by html, but not the ones created after, with the js.

My guess is that this has to do with the js code that generates the form elements

Any know issues regarding this?

Many thanks

[penders]

How are you generating your form elements with JS? Are you simply stuffing them into your form with innerHTML, or are you creating each element and appending it to the DOM?

[spaceboy]

Here's the js code (which i keep in a separate file)
f.js

function nOption(txt, val) { 
var opt = document.createElement('option'); 
opt.text = txt; 
opt.value = val; 
return opt; 
} 
function create_SizeSelect() { 
var c = new Array(); 
c[0] = nOption('X Small', 'XS'); 
c[1] = nOption('Small', 'S'); 
c[2] = nOption('Medium', 'M'); 
c[3] = nOption('Large', 'L'); 
c[4] = nOption('X Large', 'XL'); 
c[5] = nOption('XX Large', 'XXL'); 
var sel = document.createElement('select'); 
//sel.name = 'p_st_size[]'; 
sel.setAttribute('name', 'p_st_size[]'); 
//sel.id = 'p_st_size'; 
sel.setAttribute('id', 'p_st_size'); 
sel.className = 'small'; 
for ( i=0; i<c.length; i++) 
sel.options.add(c[i]); 
return sel; 
} 
function create_SizeRow(c_row, t_name) { 
var nRow = document.getElementById(t_name).rows.length - 2; 
var nQnt = nRow - 3; 
elem = new Array(); 
elem[0] = create_SizeSelect(); 
c = new Array(); 
c[0] = create_Cells(0, 2, elem, ''); 
c[0].align = 'right'; 
elem = new Array(); 
elem[0] = create_Input('p_st_qnt[]', 'text', ''); 
elem[0].className = 'small'; 
elem[1] = create_Input('p_st_coming[]', 'checkbox', nQnt); 
elem[1].className = 'radio'; 
c[1] = create_Cells(233, 0, elem, '&nbsp;Coming soon'); 
if ( c_row == '0' && t_name != '' ) { 
var tRow = document.getElementById(t_name).insertRow( nRow ); 
for ( i=0; i<c.length; i++ ) 
tRow.appendChild(c[i]); 
} else 
return c; 
} 
function create_Input(iName, iType, iValue) { 
var x = document.createElement("input"); 
x.type = iType; 
//x.name = iName; 
x.setAttribute('name', iName); 
x.id = iName; 
//x.value = iValue; 
x.setAttribute('value', iValue); 
return x; 
} 
function create_Cells(cWidth, cSpan, Elems, Text) { 
var c = document.createElement("td"); 
if ( cSpan > 0 ) 
c.colSpan = cSpan; 
else 
c.width = cWidth 
/** adds form elements **/ 
if ( Elems.constructor == Array ) { 
for ( i=0; i<Elems.length; i++ ) 
c.appendChild(Elems[i]); 
c.innerHTML += Text; // concatenates the text after the elements 
} else 
c.innerHTML = Text; 
/** adds form elements **/ 
return c; 
} 

I was told to try the 'setAttribute', but it doesn't work, that's why i've commented few lines.

and here's the html:

<a href="#" onclick="create_SizeRow('0', 'tblcolour'); return false;">add size &gt;</a> 

I haven't tried using $_GET, and I won't unless I run out of options (just because don't know how that would behave on other browsers)

Thanks for the replies !

[spaceboy]

Thank you all for the replies.

I found what the problem is. Internet Explorer does not allow you to add a name attribute to any of your form fields after the tag itself is created.

[javascript.about.com...]

The form that site proposes works fine for IE, but clashes on other browsers (e.g. Firefox).
I added this condition:

if ( navigator.appName == 'Microsoft Internet Explorer')

i don't think that condition is a 100% reliable, but it's doing the trick so far.

[penders]

Hi spaceboy, thanks for coming back with your reasoning behind the problem and solution. I actually need to do something similar with a form and no doubt would have encountered the same problem - you've saved me some work!

However, there may be an alternative method to generate your form INPUTs. Quirksmode's Extending forms script [quirksmode.org] does something similar (dynamically creating form elements using JS) but does not appear to suffer with this NAME attribute problem in IE. Instead of creating the form INPUTs from scratch with createElement(), the form INPUTs are cloned (using .cloneNode()) from a hidden template already on the page. This 'template' already has a NAME attribute. When this element is cloned, the NAME attribute is simply changed by appending a number to make it unique.

Apart from a problem with IE and radio buttons, Quirksmode's method appears to work OK cross-browser, although I've not tried it myself yet.

[spaceboy]

Hi penders

Thanks for the link, I'm trying it and have encountered problems with it. I've got the form elements inside a table, and although the clone function does clone all the div and it's children it doesn't clone the form elements properties.
However, I like the idea of cloning a pice of code, quite handy and saves the nuisance making changes in two separate files (the html and js).

[DrDoc]

Instead of using

setAttribute

you can use

elementref.****

for attributes like

name

,

id

. It will work fine in both IE and FF/Op.