Question

I need some help please,

I have a PHP page with a drop down list, populated by a mysql database query.
I want to be able to display the database details for the selected option in the other table cells.
Ideally this can be acheived without a page refresh.

In addition to this the table will consist of up to 75 rows (pallets on the vehicle – this is for a sales tool) so need to acheive this with a a while statement or something. each row will have a selection box to choose a packcode.

my code with the drop down lists is below, the table only consists of the 5 rows for now.

I know I need to use ajax or javascript in addition to this?

If anyone has an example script or can use my code as an example I would really appreciated it.

<?

  $con = mysql_connect("localhost","user","password");
  if (!$con)
  {
    die('Could not connect: ' . mysql_error());
  }

  mysql_select_db("dbname", $con);

  $packcodesql="SELECT packcode from skudata order by packcode"; 
  $resultpackcode=mysql_query($packcodesql); 
  $optionspackcode=""; 

  while ($row=mysql_fetch_array($resultpackcode)) { 
     $packcode=$row["packcode"]; 
     $optionspackcode.="<OPTION VALUE=\"$packcode\">".$packcode; 
  } 
?>

<table border=1>
<tr>
  <td>Pack Code</td>
  <td>Category</td>
  <td>Selling Units</td>        
  <td>Full Pallet QTY</td>
  <td>Order QTY</td>
</tr>
<Tr>
  <td>
    <SELECT NAME=packcode1 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
  </td>
  <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode1" -->
  </td>
  <td>
    <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode1" -->
  </td>     
  <td>
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode1" -->
  </td>
  <td><input type="text" id="qty" name="qty"></td>
</tr>       
<Tr>
  <td>
    <SELECT NAME=packcode2 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
  </td>
  <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode2" -->
  </td>
  <td>
   <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode2" -->
  </td>     
  <td>
   <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode2" -->
  </td>
  <td><input type="text" id="qty" name="qty"></td>
</tr>       
<Tr>
   <td>
    <SELECT NAME=packcode3 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
   </td>
   <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode3" -->
   </td>
   <td>
    <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode3" -->
   </td>        
   <td>
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode3" -->
   </td>
   <td><input type="text" id="qty" name="qty"></td>
</tr>       
<Tr>
   <td>
    <SELECT NAME=packcode4 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
   </td>
   <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode4" -->
   </td>
   <td>
   <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode4" -->
   </td>        
   <td>
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode4" -->
   </td>
   <td><input type="text" id="qty" name="qty"></td>
</tr>       
</table>

Answer 1

You want to populate the with data from a database that is linked to the box above the td’s?

If so, you could use AJAX yeah, and put an onclick (pretty sure that should do it) on the options of the select box.

<select>
    <option onclick="myAjaxFunction(this);">Some name</option>
    <option onclick="myAjaxFunction(this);">Some other name</option>
</select>

then you would have to create the function myAjaxFunction which will contain you code for the Ajax request (http://api.jquery.com/jQuery.ajax/).
Simple example could be:

<script>
function myAjaxFunction(elem) {
    $.ajax({
        url: 'target/file.php',
        success: function(response) {
            $("#target-td").html(response);
        }
    });
}
</script>

And finally a .php file that you call with the AJAX, containing your database call. In the file you just echo out what you want to display.

Ideally, you will do one call and return it all using json. An attribute

dataType: 'json'

can be added to the $.ajax() call, and you can use:

echo json_encode($myContent);

in PHP you json encode you php content (preferably in an array()).

This should have pointed you in the way 🙂 please tell me if i need to be more specific, or provide better examples…

UPDATE

You could create unique id’s for each of the td’s you want to target. Then create

<td>
    <select>
        <option onclick="firstPackCodeAjax('<?=$packcodeValue?>');" value="<?=$packcodeValue?>"><?=$packcodeValue?></option>
    </select>
</td>
<td id="categoryTd">
   <!-- show mysql result for "select Category from skudata where packcode=packcode1" -->
</td>
<td id="unitsTd">
    <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode1" -->
</td>     
<td id="palletTd">
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode1" -->
</td>

Then your AJAX function would be:

<script>
function firstPackCodeAjax(packCode) {
    $.ajax({
        url: 'target/file.php',
        data: {code: packCode},
        dataType: 'json',
        success: function(json) {
            $("#categoryTd").html(json.Category);
            $("#unitsTd").html(json.SellingUnits);
            $("#palletTd").html(json.FullPalletQTY);
        }
    });
}
</script>

This expects the data output to be json, and in the format:

[
    { "Category": "Fast cars" },
    { "SellingUnits": "9001" },
    { "FullPalletQTY": "9001" }
];

You would then create a function for each select you want to pull AJAX in with. The target/file.php you’ll need to create yourself somewhere. Here you fetch the data and echo it out in json. Good luck 😉 Also, this could very easily be optimized, but thats for later…