使用onchange js的foreach文本框

时间:2014-06-09 02:47:28

标签: javascript jquery

我试图在我拥有的每个文本框上都有一个onchange事件。但我的脚本只适用于第一行文本框。有谁可以帮助我?

            <?php
        foreach($get_order_details as $row_order_details):
        ?>

    <form method = "post">
        <tr>
            <td width="180px"><?php echo $row_order_details['name']; ?></td>
            <td width="180px"><?php echo $row_order_details['description']; ?></td>
            <td width="180px"><?php echo $row_order_details['qty']; ?></td>
            <td width="145px"><input type = "text"  name = "received_qty" id = "received_qty" class = "form-control" onchange = "myFunction1();"/></td>
            <td width = "145px"><input class = "form-control" type = "text" name = "cost" id = "cost" onchange = "myFunction();" /></td>
            <th width = "145px"><input class = "form-control" type = "text" name = "total_cost" id = "total_cost" disabled /></th>
            <td><button type = "submit" value = "" name = "received" class = "btn btn-primary">Receive</button></td>
        </tr>

    </form>

        <?php
        endforeach;
        ?>

这是我的javascript代码。

这是我的剧本

            <script>
    function myFunction1()
    {
        var received_qty = document.getElementById('received_qty').value;
        var cost = document.getElementById('cost').value;

        var total = received_qty * cost;    

        var cost = document.getElementById('total_cost').value = total;

    }
    function myFunction()
    {
        var received_qty = document.getElementById('received_qty').value;
        var cost = document.getElementById('cost').value;

        var total = received_qty * cost;

        var cost = document.getElementById('total_cost').value = total;

    }
    </script>

1 个答案:

答案 0 :(得分:2)

你写了一些关于jquery ill的事实为你提供了这个解决方案:)

<强> JSFIDDLE

一些输入

<input type="text" class="foo" id="i1" />
<input type="text" class="foo" id="i2" />
<input type="text" class="foo" id="i3" />
<input type="text" class="foo" id="i4" />
<input type="text" class="foo" id="i5" />
<input type="text" id="i6" />
<input type="text" id="i7" />
<input type="text" id="i8" />
<input type="text" id="i9" />

你的jquery

$(document).ready(function(){

    $('.foo').on('change', function(){
       alert($(this).val()); 
    });
});