AJAX Product Selection and Row Add/Delete

[phenner]

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

 

<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:

 

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

 

<?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!)

 

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!