Dynamically add and remove rows that include PHP code

[rhigutierrez]

Hello All,

I am creating a stock request form, which employees will fill out in order to remove products from inventory for various reasons. I am going to be saving these requests to a database and also displaying the completed form for employees to print.

The problem I am having is, I have the following table row for each product that the employee requests...

echo '<tr>';
echo '<td class="product_col">';
echo '<select name="items[product]">';
echo '<option value="">-- Please Select A Product --</option>';
for($j = 0; $j < $product_num; $j++)
{
$products = mysql_fetch_array($product_result);
echo '<option value="'.$products['part_number'].'">'.$products['part_number'].' &nbsp; '.$products['product_description'].'</option>';
}
echo '</select>';
echo '</td>';
echo '<td class="qty_col"><input type="text" name="items[qty]" value="" class="smbox" style="width: 100px;" /></td>';
echo '<td class="edit_col">';
echo '<a href="" onclick="">';
echo '<img height="34" border="0" alt="Add another product" width="34" src="imgs/plus_sign.jpg">';
echo '</a>';
echo '&nbsp;';
echo '<img height="34" border="0" alt="Delete this product" width="34" src="imgs/minus_sign.jpg">';
echo '</td>';
echo '</tr>';

When a user clicks on the plus_sign.jpg image, I would like to dynamically add another row and when they click on the minus_sign.jpg image, I would like for it to delete the particular row that they clicked on.

I found a javascript to dynamically add and delete divs using create element and innerHTML but I cannot get it to work for me because I am using a PHP for loop to populate the <select> element with products from a database.

Any help would be GREATLY appreciated.

Thanks

[timster]

Hello there and welcome to WebmasterWorld.

Can you give more info about the problem you are having getting the script to work?

One thing I did notice, JavaScript might want you to use id attributes in addtion to name:

Change:

echo '<select name="items[product]">';

To:

echo '<select id="items[product]" name="items[product]">';

Depending on how the JavaScript is written, it might be necessary to have PHP dynamically generate the JavaScript alongside the HTML, and then "echo" both of them out to create the page.

[rhigutierrez]

Hi

Here is the JavaScript script I found for dynamically adding elements...

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);
 newdiv.innerHTML = 'Element Number '+num+' has been added! <a href='#' onclick='removeElement('+divIdName+')'>Remove the div "'+divIdName+'"</a>';
 ni.appendChild(newdiv);
}
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
<div id="myDiv"> </div>

But even if I modified that to create tr's, td's, select's etc...
How would I create the

<option>

's for the

<select name="items[product]">

using innerHTML when they are all being created by a PHP for loop?

Basically I need to find a way to be able to click on the two images in the third column of each row to add another row or delete a row. This is the row I need to add and delete below.

<tr>
<td class="product_col">
<select name="items[product]">
<option value="">-- Please Select A Product --</option>
<?php
for($j = 0; $j < $product_num; $j++)
{
$products = mysql_fetch_array($product_result);
echo '<option value="'.$products['part_number'].'">'.$products['part_number'].' &nbsp; '.$products['product_description'].'</option>';
}
?>
</select>
</td>
<td class="qty_col" align="center"><input type="text" name="items[qty]" value="" class="smbox" style="width: 100px;" /></td>
<td class="edit_col">
<a href="javascript:;" onclick="addElement();">
<img height="34" border="0" alt="Add another product" width="34" src="imgs/plus_sign.jpg">
</a>
&nbsp;
<img height="34" border="0" alt="Delete this product" width="34" src="imgs/minus_sign.jpg">
</td>
</tr>

I hope this makes more sense and thank you so much for you help.