Here is what I am trying to accomplish:
Upon a page loading a simply form is displayed for the user. The user can at that point add new form elements via hyperlink/javascript. The code following works fine.
<head>
<script>
row_no=1;
function addRow( tbl, row ) {
//so that user can only add 15 rows
if( row_no <= 15 ) {
//all necessary form fields for a new order
var textbox_quantity = '<input type="text" name="add_order_quantity[]" value="" size="4">'; //for text box
var textbox_description = '<textarea cols="30" rows="2" name="add_order_description[]"></textarea>'; //for text box
var textbox_price = '<input type="text" name="add_order_price[]" value="" size="15">'; //for text box
var textbox_part = '<input type="text" name="add_order_partnumber[]" value="" size="20">'; //for text box
var textbox_vendor = '<input type="text" name="add_order_vendor[]" value="" size="20">'; //for text box
var remove = '<a href="#" onclick="removeRow(\''+ tbl +'\',\'' + row_no + '\')"/>[X]</a>';
//for suitable label to the row
var tbl = document.getElementById( tbl ); //to identify the table in which the row will get insert
var rowIndex = document.getElementById( row ).value; //to identify the row after which the row will be inserted
try {
var newRow = tbl.insertRow( row_no ); //creation of new row
var newCell = newRow.insertCell( 0 ); //first cell in the row
newCell.innerHTML = remove;
var newCell = newRow.insertCell( 1 ); //second cell in the row
newCell.innerHTML = textbox_quantity; //insertion of the text box and the remove text using their variable
var newCell = newRow.insertCell( 2 ); //third cell in the row
newCell.innerHTML = textbox_description; //insertion of the text box and the remove text using their variable
var newCell = newRow.insertCell( 3 ); //fourth cell in the row
newCell.innerHTML = textbox_price; //insertion of the text box and the remove text using their variable
var newCell = newRow.insertCell( 4 ); // fifth cell in the row
newCell.innerHTML = textbox_part; //insertion of the text box and the remove text using their variable
var newCell = newRow.insertCell( 5 ); // fifth cell in the row
newCell.innerHTML = textbox_vendor; //insertion of the text box and the remove text using their variable
row_no++;
} catch ( ex ) {
alert( ex );
}
}
if(row_no>3)//if the row contain 3 textbox, the add button will disapper
{
document.getElementById("add").style.display="none";
}
}
function removeRow(tbl,num)
{
var table = document.getElementById(tbl);//adentification of table
try {
row_no--;
table.deleteRow(num);//deletion of the clicked row
} catch (ex) {
alert(ex);
}
if( row_no <= 3 )//if row is less than 3 then the button will again appear to add row
{
document.getElementById("add").style.display="block";
}
}
</script>
</head>
<table border=\"0\" width=\"100%\" id=\"mytable\">
<TR align=\"center\">
<TD> </TD>
<TD><b>Quantity</b></TD>
<TD><b>Item description</b></TD>
<TD><b>Price</b></TD>
<TD><b>Part number</b></TD>
<TD><b>Vendor name</b></TD>
</TR>
<TR id=\"myrow\">
<td valign=\"middle\" align=\"center\"> </td>
<TD valign=\"middle\" align=\"center\"><input type=\"text\" name=\"add_order_quantity[]\" value=\"\" size=\"4\"></TD>
<TD><textarea cols=\"30\" rows=\"2\" name=\"add_order_description[]\"></textarea></TD>
<TD><input type=\"text\" name=\"add_order_price[]\" value=\"\" size=\"15\"></TD>
<TD><input type=\"text\" name=\"add_order_partnumber[]\" value=\"\" size=\"20\"></TD>
<TD><input type=\"text\" name=\"add_order_vendor[]\" value=\"\" size=\"20\"></TD>
</TR>
<tr>
<td colspan=\"5\"><a href=\"javascript:addRow('mytable', 'myrow' )\">Add new item</a></td>
</tr>
</table>
The problem I am having is once the form is submitted the resulting data in Firefox and Mozilla browsers display the following (only one element of the form array is sent to the resulting php script)
[example of firefox output]
POST Variables
Array
(
[add_order_quantity] => Array
(
[0] => asdfaaa
)
[add_order_description] => Array
(
[0] => aaaa
)
[add_order_price] => Array
(
[0] => aaaaa
)
[add_order_partnumber] => Array
(
[0] => bbbbb
)
[add_order_vendor] => Array
(
[0] => bbbbbb
)
[add_order_source] =>
[add_order_tracking] =>
[add_order_contact] =>
[add_order_eta] =>
[add_order_division] =>
[add_order_notes] =>
[add_order_group_account] => ----------
)
As you can see with the output from IE below all form elements are accounted for.
[example of IE output]
POST Variables
Array
(
[add_order_quantity] => Array
(
[0] => asdfaaa
[1] => asdfasfadsf
)
[add_order_description] => Array
(
[0] => aaaa
[1] => asdfasfadsf
)
[add_order_price] => Array
(
[0] => aaaaa
[1] => asdfasfadsf
)
[add_order_partnumber] => Array
(
[0] => bbbbb
[1] => asdfasfadsf
)
[add_order_vendor] => Array
(
[0] => bbbbbb
[1] => asdfasfadsf
)
[add_order_source] =>
[add_order_tracking] =>
[add_order_contact] =>
[add_order_eta] =>
[add_order_division] =>
[add_order_notes] =>
[add_order_group_account] => ----------
)
I am not sure how I can resolve this for all browsers. Any help is appreciated.
