Question

Possible Duplicate:
Unable to get textfield value using jQuery

I am trying to change the input field when users changes the quantity of items in a text field. Here I am iterating through my list from my database. Now I have to make an invoice for customer.

In my code, if I am changing the quantity of a single item, then it is affecting all the other items in the list. I want to change only the specific items, where its quantity has been changed.

The code below is giving me an error. It is changing all the items value on single change of item quantity.

My code: (New Update)

          <script type="text/javascript">
             $(document).ready(function(){  
                $(function() {        
                   $('input[name="quantity"]').change(function() {
                    var $tr = $(this).closest("tr");
                    var unitprice = $tr.find('input[name^="unitprice"]').val();  
                    $tr.find('input[name^="price"]').val($(this).val() * unitprice);
                }); 
                var totalPrice = 0;
                $('input[name="price"]').each(function(){
                    totalPrice += parseFloat(this.value);
                    $('[name=subtotal]').val(totalPrice);
                });
            }); 
        }); 
        </script>
         ..................
         ..................
         <tr>
            <td height="65%" valign="top" width="100%"> 
                <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                    <s:iterator  value="#session.BOK" status="userStatus">
                        <tr style="height: 10px;"> 
                            <td width="65%" align="left"><s:property value="bookTitile"/></td> 
                            <td width="10%" align="left"><s:textfield name="unitprice" value="%{price}" size="4"/></td>
                            <td width="10%" align="center"><s:textfield name="quantity" value="1" size="2"/></td>  
                            <td width="15%" align="center"><s:textfield name="price" value="%{price}" size="6"></s:textfield> </td>
                        </tr> 
                    </s:iterator>  
                </table>   
                </td>
            </tr> 
              <tr>
                   <td height="1%" valign="top" width="100%"> 
                          <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                                       <tr style="height: 10px;"> 
                                           <td width="100%" align="right" colspan="5">   
                                                <s:textfield name="subtotal"  size="5"> </s:textfield>
                                          </td>
                                       </tr> 
                           </table>  
                 </td>
          </tr>

The output looks like this image:

Answer 1

Try this instead

<script type="text/javascript">
    $(function() {        
        $('input[name="quantity"]').change(function() {
            var $tr = $(this).closest("tr");
            var unitprice = $tr.find('input[name^="unitprice"]').val();  
            $tr.find('input[name^="price"]').val($(this).val() * unitprice);
        });
    });
</script>

Update : This the function that will return the total caculated price. Use it as per need.

function calculateBasket() {
    var totalPrice = 0;
    $('input[name="price"]').each(function(){
        totalPrice += parseFloat(this.value);
    });

    return totalPrice;
}