Hi All,
I am creating a page where a customer can create a new order from a list of items.
All the data is stored in a MySQL database and is accessed by PHP.
What I am trying to achieve is the following:
Starting with one row as shown below:
The customer can then select a product from the list and the details appear in the following rows as shown here:
The customer should then be able to add another row by pressing the + button or delete that row by pressing the - button.
At the moment I have got the system to work as far as one row goes with the data being placed into the rows using AJAX.
I have then tried to add new rows/delete rows etc. but have had little success and have pretty much hit a brick wall.
I would greatly appreciate it if someone could take a look and point me in the right direction!
Thanks!
The code for the above project is shown below:
neworder.php
Code:
<table id="dataTable" style="margin-left:22px;margin-top:30px;">
<thead>
<tr class="odd">
<th style="text-align:center;"scope="col" abbr="Add/Delete"><INPUT style="width:25px" TYPE="button" VALUE="+" onClick="addRow('dataTable')"/></th>
<th scope="col" abbr="Qty">Quantity</th>
<th scope="col" abbr="Code">Product Code</th>
<th scope="col" abbr="Argus Code">Argus Product Code</th>
<th scope="col" abbr="Desc">Description</th>
<th scope="col" abbr="Rate">Rate</th>
<th scope="col" abbr="Amount">Amount</th>
<th scope="col" abbr="VAT">VAT</th>
</tr>
</thead>
<tbody id="txtHint">
<tr class="odd">
<td style="text-align:center;"><INPUT style="width:25px" TYPE="button" VALUE="-" onClick="deleteRow('dataTable')"></td>
<td><input style="width:40px" type="text" value="1" name="quantity<? echo $num; ?>"/></td>
<td><form><select name="products" onchange="showProductList(this.value, <?php echo getCustNum($custname); ?>)"><option value="">Select a product:</option><?php $products = mysql_query("SELECT * FROM products");
while($getproducts = mysql_fetch_array($products)){
echo '<option value='.$getproducts['ProductCode'].'>'.$getproducts['ProductCode'].' - '.$getproducts['ArgusProductCode'];}
?></select></form></td>
<td><?php echo $argusproductcode; ?></td>
<td><?php echo $description; ?></td>
<td style="text-align:right;"><? echo $rate; ?></td>
<td style="text-align:right;"><? //echo $amount; ?></td>
<td><?php echo $vat; ?></td>
</tr>
</tbody>
<tfoot>
<tr><td></td> <td></td> <td></td> <td></td> <td>Sub-total</td> <td style="text-align:right;"><?php echo getSubTotal($ponum); ?></td> <td></td> <td></td> </tr>
<tr><td></td> <td></td> <td></td> <td></td> <td>VAT</td> <td style="text-align:right;"><?php echo getVATCost($ponum); ?></td> <td></td> <td></td> </tr>
<tr><td></td> <td></td> <td></td> <td></td> <td>TOTAL</td> <td style="text-align:right;">£<?php echo number_format((getSubTotal($ponum)+getVATCost($ponum)), 2, '.', ''); ?></td> <td></td> <td></td> </tr>
</tfoot>
</table>
JS/XML for the data to be placed in the rows:
Code:
function showProductList(str, str2)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getproductlist.php?q="+str+"&c="+str2,true);
xmlhttp.send();
}
getproductlist.php
Code:
<?php
include("db.php");
include("functions.php");
$q = $_GET["q"];
$c = $_GET["c"];
$productcode = $q;
$q1 = getProductID($productcode);
$counter = 1;
$result = mysql_query("SELECT * FROM products WHERE ProductCode = '$productcode'");
$result2 = mysql_query("SELECT * FROM customerPrices WHERE CustNum = '$c' AND ProductID = '$q1'");
while($row = mysql_fetch_array($result))
{
while($row2 = mysql_fetch_array($result2))
{
//while(counter > 0)
//{
$argusproductcode = $row['ArgusProductCode'];
$description = $row['Description'];
$rate = $row2['Rate'];
$vat = $row2['VAT'];
echo '<tr class="odd">
<td style="text-align:center;"><input style="width:25px" type="button" value="-" onClick="deleteRow(\'dataTable\')"></td>
<td><input style="width:40px" type="text" value="1" name="quantity'.$num.'"/></td>
<td><form>'.$productcode.'</form></td>
<td>'.$argusproductcode.'</td>
<td>'.$description.'</td>
<td style="text-align:right;">'.$rate.'</td>
<td style="text-align:right;">'.$amount.'</td>
<td>'.$vat.'</td>
</tr>';
//}
}
}
?>
JS for Adding/Deleting Rows (Although some of this is probably garbage!)
Code:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
rowCount = rowCount - 3;
var row = table.insertRow(rowCount);
row.id = "row";
document.getElementById("row").className = "odd";
var cell1 = row.insertCell(0);
var delbutton = document.createElement("input");
delbutton.type = "button";
delbutton.style.textAlign = "center";
delbutton.style.width = "25px";
delbutton.value = "-";
cell1.appendChild(delbutton);
var cell2 = row.insertCell(1);
var quantity = document.createElement("input");
quantity.type = "text";
quantity.style.width = "40px";
quantity.value = "1";
cell2.appendChild(quantity);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
Thanks again!
Before you post, read our: 
