Returning current row index and applying to string javascript problem

[Constantine AI]

Here is the situation i am currently trying to update a sales order using PHP and javascript. When you click on the edit button it brings you a new site page with existing sales order details within. I am wanting the order lines to be within option boxes so they can modify the order if they wish. I created some javascript for the create sale site page which automatically assigned a price to a particular product once selected. Here is the code for this;

 $(document).ready(function() {
 
     $("#product_select > option").click(function () {
        var selectvalue = $('#product_select').val();
        $.post("<?php echo SITE_URL; ?>sale/ajax",
        { id: selectvalue },
        function(return_id)
        {
            var return_array = return_id.split(",");
            $("#price").val(return_array[0]);
            if (return_array[1] == 1) {
                $('#duration').removeAttr("disabled"); 
                $('#duration').attr('enabled', 'enabled');
                $('#duration').val('0');
            } else {
                $('#duration').removeAttr("enabled"); 
                $('#duration').attr('disabled', 'disabled');
                $('#duration').val('0');
            }
        });
    });
 
 });
 
</script>

Here i am pretty much posting the product_id to the site ajax and returning the price into the unit_price input on the site. This works fine. However i am wanting a similar procedure but if they change the order lines on the edit form. The form is setup as follows;

<div id="main">
 
    <h2><i><u>Order Header Details</u></i></h2><br />
 
    <table id="sale" border='1' style="border-style: outset; empty-cells: show">
        <tr>
            <th>Order No</th>
            <th>Date</th>
            <th>Account</th>
            <th>Amount</th>
            <th>Payment Method</th>
            <th>Sales Rep</th>
        </tr>
            <tr>
                <td><strong><?php echo $order->order_id; ?></strong></td>
                <td><?php echo $order->date_added; ?></td>
                <td><?php echo $order->company_name; ?></td>
                <td>&pound;<?php echo number_format($order->sales_total,2) ?></td>
                <td><?php echo $order->payment_option; ?></td>
                <td><?php echo $order->rep_name; ?></td>
            </tr>
    </table>
 
    <h2><i><u>Order Line Details</u></i></h2><br />
 
    <table id="basket" border='1' style="border-style: outset; empty-cells: show">
        <tr>
            <th>Item type</th>
            <th>Price (&pound;)</th>
            <th>per</th>
            <th>Duration</th>
            <th>Update</th>
            <th>Delete</th>
        </tr>
        <?php
        //$i = 0;
        foreach ($basket as $basket) {
        ?>
        <tbody>
        <tr class="line edit_item">
            <td class="product">
            <select class="product_select" id="product_select<?php echo $i; ?>" name="product">
                <?php foreach ($products as $product) { ?>
                <option value="<?php echo $product->product_id; ?>" <?php if ($product->product_id == $basket->product_id) { echo 'selected="selected"'; } ?>><?php echo $product->product_name; ?></option>
                <?php } ?>
            </select>
            </td>
            <td class="price">
                <input name="price" class="price" id="price<?php echo $i; ?>" type="text" value="<?php echo $basket->unit_price; ?>" size="5" />
            </td>
            <td class="per">&nbsp;</td>
            <td class="duration">
                <select name="duration" class="duration id="duration<?php echo $i; ?>">
                    <option value="0">(Select)</option>
                    <option value="1">1 Month</option>
                    <option value="3">3 Months</option>
                    <option value="6">6 Months</option>
                    <option value="12">1 Year</option>
                </select>
            </td>
            <td class="controls"><button type="button" id="update">Update</button></td>
            <td class="controls"><button type="button" id="delete">Delete</button></td>
        </tr>
        <?php
        //$i++;
        } ?>
        </tbody>
    </table>
</div>

As you can see i am using PHP syntax for various objects including the product_select option, price input and duration options. On this form page you can have many order lines. Using the create sales javascript does work for the editing of order lines but for the first record only, i realise it is due to my poor javascripting skills. I have only been learning it for 3 days.

My theory for the code is that i require the row.index of each order line and passing that value through to the javascript however i have tried many times to find and get the current row.index syntax to work. I don't know what i am doing wrong. Here is the code i have been looking at;

onload = function() {
    if (!document.getElementsByTagName || !document.createTextNode) return;
    var rows = document.getElementById('my_table').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function() {
            alert(this.rowIndex + 1);
        }
    }
}
 

All i am wanting is if users change the order line details via the product_select or duration options then to update the price field via the javascript code.

Any advice or views on how or what i should do to get this code working would be greatly appreciated. Thanks in advance.

[gits]

when you assign events with a loop and you need to preserve the index then you would need to use a so called closure ... which basicly is a function that stores the value you want to preserve (closure) in it. let me give you a short example:

<html>
<head>
    <script type="text/javascript">
 
    function attachClickEvents(doc) {
        var ele = doc.getElementsByTagName('div');
 
        for (var i = 0, l = ele.length; i < l; ++i) {
            var n = ele[i];
 
            n.onclick = function(idx) {
                return function() { alert(idx) }
            }(i);
        }
    }
 
    </script>
</head>
<body onload="attachClickEvents(document);">
    <div>foo</div>
    <div>foo1</div>
    <div>foo2</div>
    <div>foo3</div>
    <div>foo4</div>
    <div>foo5</div>
    <div>foo6</div>
    <div>foo7</div>
    <div>foo8</div>
    <div>foo9</div>
    <div>foo10</div>
    <div>foo11</div>
    <div>foo12</div>
    <div>foo13</div>
    <div>foo14</div>
    <div>foo15</div>
    <div>foo16</div>
    <div>foo17</div>
</body>
</html>
 

here you see that the index i is preserved by using the closure. when you instead use:

function attachClickEvents(doc) {
    var ele = doc.getElementsByTagName('div');
 
    for (var i = 0, l = ele.length; i < l; ++i) {
        var n = ele[i];
 
        n.onclick = function() {
            alert(i);
        };
    }
}
 

then you will always get the last index returned ... since it just alerts the value that i had assigned after the complete loop.

kind regards