Performing Functions on a Dynamically Created Table

Question

I am retrieving 30 bakery items from a mySQL database into a dynamic HTML table using PHP. The data retrieved are Product, Item (Primary Key), Weight, and Price. My code also creates an INPUT box, called Quantity, for each item so that the user can type in how many cases he wants. Below is a segment of the code used to generate the dynamic table:

        $i=0;

    while ($i < $num) {
        $Item=mysql_result($result,$i,"Item");
        $Product=mysql_result($result,$i,"Product");
        $Weight=mysql_result($result,$i,"Weight");
        $BGPrice=mysql_result($result,$i,"BGPrice");

    echo "<tr>";
    echo "<td>$Product</td>";
    echo "<td><INPUT NAME=Item size=5 value=$Item READONLY></td>";
    echo "<td><INPUT NAME=Weight size=5 value=$Weight READONLY></td>";
    echo "<td><INPUT NAME=Price size=5 value=$BGPrice READONLY></td>";
    echo "<td><INPUT NAME=Quantity size=5 value=0 tabindex=$i></td>";
    echo "<td><INPUT NAME=ExtPrice size=5 value=0 READONLY></td>";
    echo "<td><INPUT NAME=TotalWt size=5 value=0 READONLY></td>";
    echo "</tr>";

    $i++;
    }

I need JavaScript to call a function and calculate the values for Extended Price (ExtPrice) and Total Weight (TotalWt) as soon as the user enters the number of cases he would like to order.

Here's my struggle: there are 30 items in this dynamic table and each item's INPUT NAME is the same. How can I create a function that updates ExtPrice and TotalWt for each individual product?

Answer 1

Your JavaScript should not directly reference each input by name. Instead, obtain a reference to the adjacent cells in the same row.

Assuming you have a submit button that re-calculates the results, here's an example:

document.getElementById("sub").addEventListener("click", function(e) {
    var i, row;
    var rows = document.getElementsByTagName("tr");
    // process each row individually
    for (i = 0, row; row = rows[i++];) {
        totalsForRow(row);
    }
    e.preventDefault();
}, false);

// updates the totals for each row
function totalsForRow(tr) {
    var j, inp, fields = {};
    var inputs = tr.getElementsByTagName("input");
    if (!inputs || inputs.length === 0)
        return;
    // map each input by name
    for (j = 0; inp = inputs[j++];) {
        fields[inp.name] = inp;
    }
    // update totals for this row, using the stored ref to the input
    fields.TotalWt.value = fields.Weight.value * fields.Quantity.value;
    fields.ExtPrice.value = fields.Price.value * fields.Quantity.value;
}

This doesn't do any error checking and could be improved in several ways. It's just meant to illustrate one approach.

See a working example.

Answer 2

You could use the $i variable to uniquely identify each input

echo "<td><INPUT NAME=Item id='item$i' size=5 value='$Item' READONLY></td>";

And as a side note use quotes or double quotes to wrap $Item as it may contains spaces, etc..