...

View Full Version : AJAX Product Selection and Row Add/Delete



rfennah91
11-23-2010, 05:16 PM
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:

http://img254.imageshack.us/img254/9500/customerx.jpg

The customer can then select a product from the list and the details appear in the following rows as shown here:

http://img222.imageshack.us/img222/8741/customer2.jpg

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;">&pound;<?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!

rfennah91
11-24-2010, 10:09 AM
Any ideas guys?

Even just a starting point would be great to get this thing moving again!

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum