Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post

    AJAX Product Selection and Row Add/Delete

    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;">&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:

    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!

  • #2
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    Any ideas guys?

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

    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •