i won't really use in advance - the user adds fields dynamically via javascript, and can delete new and existing fields at the same time (the deletes on the existing take place via ajax calls)
Here is the full code, and after is the js file that adds the fields
<?php
require_once ("DB.php");
if (!$GET["owner_ID"]) {$owner_ID = 1;}
else {$owner_ID = $GET["owner_ID"];}
require_once ("../common/global_inc.php");
$db = DB::connect($dsn);
if( DB::isError($db) ) {
die ($db->getMessage());
}
$js = "
<script type='text/javascript' src='delete_product.js'></script>
<script type='text/javascript' src='product.js.php'></script>
";
include ("../inc/header.inc.php");
?>
<script language='Javascript' type='text/javascript'>
function removeElement(divNum) {
var d = document.getElementById('myDiv');
d.removeChild(divNum);
}
</script>
<div id="pagecontent">
<br/>
<div class="sectionheading"><table width='100%' cellspacing='0' cellpadding='0' border='0'><tr><td align='left' width='600'>
Manage Products </td><td align='right'>
</td></tr></table></div>
<form action='manage_product.php' method='post' name='manage_product'>
<?php
if (!$_POST[submit]) {
$query3 = "SELECT product.* FROM product WHERE product.owner_ID = '$owner_ID' ";
$result3 = $db->query($query3);
$j = 1;
echo "<div id=\"myDiv\">";
while ($row3 = $result3->fetchRow(DB_FETCHMODE_ASSOC))
{
$counter++;
if ($counter%2===0){
$class = "lighter";
$class2 = "bold";
}else{
$class = "darker";
$class2= "bold";
}
echo "<div id='my".$j."Div'><table cellpadding=\"0\" width=\"100%\" border=\"0\" border=\"0\"><tr class=\"$class\"><td><input type=\"hidden\" name=\"product[]\" value=\"$row3[product_ID]\"> Name:<input type=\"text\" name=\"product_name[]\" value=\"$row3[product_desc]\" style=\"width:170px;\"> Taxable?<input type=\"checkbox\" name=\"tax[]\" style=\"border:0\" ";
if ($row3["taxable"] == 'Y') {echo "checked";}
echo "> Hourly?<input type=\"checkbox\" name=\"hourly[]\" style=\"border:0\" ";
if ($row3["hourly"] == 'Y') {echo "checked";}
echo "> Price $<input type=\"text\" size=\"5\" name=\"price[]\" value='${row3[product_price]}'><button class=\"button\" style=\"float:right;\" onclick=\"showUser($row3[product_ID]);removeElement(my".$j."Div)\"> X </button><br/>Notes: <textarea name=\"product_note[]\" cols=\"50\" rows=\"1\">${row3[product_detail]}</textarea></td></tr></table></div>";
$j++;}
$j = $j;
echo "
<input type='hidden' value=\"$j\" id=\"theValue\" />
</div><p><a href='javascript:;' onClick=\"addElement();\">Add New Product</a></p>
";
?>
<br/><input type='submit' name='submit' value='Update Products'>
</form></body>
<?php } else {
$product = $POST["product"];
$product_name = $POST["product_name"];
$owner = $owner_ID;
$price = $POST["price"];
$comment = $POST["product_note"];
$tax = $POST["tax"];
$hourly = $POST["hourly"];
$i=0;
var_dump($tax);
foreach ($product as $prod) {
if (isset($tax[$i]))
{
$istax = 'Y';
}
else {$istax = 'N';}
if (isset($hourly[$i]))
{
$ishourly = 'Y';
}
else {$ishourly = 'N';}
if ($prod == 'new')
{
if (strlen($product_name[$i]) > 1) {
$sql2 = "INSERT INTO product (product_ID,owner_ID,product_desc,product_price,taxable,product_detail,hourly) VALUES ('','$owner','$product_name[$i]','$price[$i]','$istax','$comment[$i]','$ishourly')";
}
}
else
{
$sql2 = "UPDATE product SET owner_ID='$owner',product_desc='$product_name[$i]',product_price='$price[$i]',taxable='$istax',product_detail='$comment[$i]',hourly='$ishourly' WHERE product_ID = '$prod'";
}
$sql2result = $db->query($sql2);
$i++;
}
}
echo "</div>"; ?>
<?php
include ("../inc/footer.inc.php");
?>
To add a new fieldset:
<?php
echo "
function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
if(num % 2 == 0){
var divIdClass = 'darker';
}else{
var divIdClass = 'lighter';
}
newdiv.innerHTML =
'<table cellpadding=\"0\" width=\"100%\" border=\"0\" border=\"0\"><tr class=\"'+divIdClass+'\"><td><input type=\"hidden\" name=\"product[]\" value=\"new\" > Name:<input type=\"text\" name=\"product_name[]\" style=\"width:170px;\" /> Taxable?<input type=\"checkbox\" name=\"tax[]\" style=\"border:0\" > Hourly?<input type=\"checkbox\" name=\"hourly[]\" style=\"border:0\" > Price $<input type=\"text\" size=\"5\" name=\"price[]\"><button class=\"button\" style=\"float:right;\" onclick=\"removeElement('+divIdName+')\"> X </button><br/>Notes: <textarea name=\"product_note[]\" cols=\"50\" rows=\"1\"></textarea></td></tr></table>';
ni.appendChild(newdiv);
}
function removeElement(divNum) {
var d = document.getElementById('myDiv');
d.removeChild(divNum);
}
";
?>