Dynamically Added HTML elements in a form

hi everyone,

i am a newbie in web programming and just starting to create a simple web application using HTML, JavaScript and PHP (and MySQL as database). i assume that this cannot be a PHP issue, that's why i posted this under JS category.

i have an html form with a table on it and some hidden fields. when the user clicks a "button" (an input button not the submit one), a JavaScript function is triggered that will add a new row to the table and three input boxes with designated id and value for each of them, that contains the information entered by the user. now, i created an imaginary function called displayFormElements(), which purpose is just to double check if the added fields are correctly inserted within the HTML form. here is how it looks like:

function displayFormElements()
{
var objCount = document.forms['Details'].length;
for (i = 0; i <= objCount; i++)
{ alert(document.forms['Details'].elements.id);
}
}

everything is working fine. it gives me exactly the id i just assigned to them. now, here's my problem. the action of the form goes to "somewhere.php?id=23" and here's my codes for that:

<?php

foreach($_POST as $key => $value)
{
echo $key . '->' . $value . '<br />';
}
?>

...which displays only the fields created during design mode, and dynamically added HTML elements were not included. how can i post them together with other elements?

thanks in advance.

regards,
hayunna