How to calculate values dynamically from textbox using jQuery?

I have an invoice.jsp page where I have to calculate some value in the textbox using jQuery or with any other way.

I don't know much about jQuery. Please help me to solve this problem.

In my invoice there is a quantity textbox. If the user enters the quantity then the calculated price should be calculated dynamically i.e (total_subPrice= unit_price * quantity) and shown in another textbox called "price".

And again the total sum of all the prices should appear in the button as a Total.

Please note: all the row values are coming from my database table based on the selection of items by users.

I have used only this code to show values in my invoice.jsp page:

<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:property value="price"/></td>
    <td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
    <td width="15%" align="center" >
      <s:textfield value="%{price}" name="" size="6"></s:textfield>
    </td>
  </tr>
</s:iterator>

And my invoice.jsp output looks like this: enter image description here

I have no idea how to calculate the line Total based on the quantity chosen and also display the sum of all the line total in the grand total textbox (see below invoice image).

I also tried this but I am still unable to solve my problem.

My full JSP code:

<table width="100%" height="50%" border="0" cellpadding="0" cellspacing="0">
  <tr>
  <td height="74%">
    <s:form action="dfs" id="form3"  theme="simple">
      <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"  id="your_content">
        <tr>
          <td valign="top" height="10%">
            <div id="invNum">Invoice# 12688</div>
            <div id="ttielMain">Vision Books</div>
            <div id="Orgaddress">    Thamel Kathmandu Nepal</div>
            <div id="phoneNum">  Tel# 00977-1-12173803</div>
            <div id="websiteOrg"> www.thebestbookfinder.com</div>
          </td>
        </tr>
        <tr>
          <td valign="top" width="100%" align="left">
          ----------------------------------------------------------- -----------------------------------
          </td>
        </tr>
        <tr>
          <td height="6%" valign="top" width="100%">
            <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
              <tr style="height: 10px;font-family: serif;font-weight: bold;font-size: 14px;">
                <td width="65%" align="left">Title</td>
                <td width="10%" align="left">Unit Price</td>
                <td width="10%" align="center">Qty</td>
                <td width="15%" align="left">Line Total</td>
              </tr>
            </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="65%" align="left">
                -------------------------------------------------------
                </td>
                <td width="10%" align="left">----------</td>
                <td width="10%" align="center">-----</td>
                <td width="15%" align="left">-------------</td>
              </tr>
            </table>
          </td>
        </tr>
        <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:property value="price"/></td>
                  <td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
                  <td width="15%" align="center"><s:textfield value="%{price}" name="" 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">
                ------------------------------------
                </td>
              </tr>
            </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" style="font-weight: b">
                  <s:set var="total" value="%{0}" />
                  <s:iterator value="#session.BOK">
                    <s:set var="total" value="%{price + #attr.total}" />
                  </s:iterator>
                  <s:textfield name="subtotal" value="%{'' + #attr.total}" size="5"> </s:textfield>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </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">Discount:<sj:textfield name="amt"  size="1"  placeholder=" %"/></td>
          </tr>
        </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">
            --------------------------------------------------------------------------------------------------
            </td>
          </tr>
        </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" style="font-weight: bolder;">
              <s:set var="total" value="%{0}" />
              <s:iterator value="#session.BOK">
                <s:set var="total" value="%{price + #attr.total}" />
              </s:iterator>
              Total: <s:property value="%{'' + #attr.total}" />
            </td>
          </tr>
        </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">
            --------------------------------------------------------------------------------------------------
            </td>
          </tr>
        </table>
      </td>
    </tr>

Solution

As @flow said, use .change():

$(function() {
    $('input[name^="quantity"]').change(function() {
        var unitprice = $(this).siblings('input[name^="unitprice"]').val();
        $(this).siblings('input[name^="price"]')
               .val($(this).val() * unitprice);
    });
});