How to calculate values dynamically from textbox using jQuery?

Question

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>

@bechm http://stackoverflow.com/questions/13430222/how-to-dynamically-calculate-value-in-the-text-box/13430320#13430320 — Dan, Nov 17 '12 at 14:54
@dda what do you mean by "The 1990s called, they want their nested tables back"? — Dan, Nov 17 '12 at 14:54
He was trying to be funny, and also point out that using tables for layout is a bad idea, since it leads to unmaintainable code which lacks any semantic meaning. This isn't to say tables are *bad*, for the presentation of tabular data they're *perfect*, but using them for layout is, at this point, pretty much an anachronism. — David Thomas, Nov 17 '12 at 17:04
It really, and only, depends on what you're presenting. There's an overview of [tableless web-design at Wikipedia](http://en.wikipedia.org/wiki/Tableless_web_design), but if you search around for [articles on semantic HTML](https://www.google.com/search?q=semantic+html&oq=semantic+html) it's worth reading through some of the results. And [A List Apart](http://alistapart.com) is often quite good, too. — David Thomas, Nov 17 '12 at 17:13

score 0 · Answer 1 · edited Nov 17 '12 at 14:21

0

Use .change() on your inputs.

jQuery Docs - Change

edited Nov 17 '12 at 14:21

Echilon

10,064
33
131
217

answered Nov 17 '12 at 13:52

flow

4,828
6
26
41

score 0 · Accepted Answer · answered Nov 17 '12 at 15:00

0

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);
    });
});

answered Nov 17 '12 at 15:00

Mathias Becher

703
8
20

but i am using `` struts2 framwork tags for input field not the simple type of code like in html `` . Will your answer works for my problem? – Dan Nov 17 '12 at 15:06
Your `` will be translated to an html `` element before it is sent to the client. The JavaScript code in the browser can only see this final html code. – Mathias Becher Nov 17 '12 at 15:10
okay thats fine. But here i have another question regarding your script. My items are showing in invoice.jsp from my db. There may be 20 items in my invoice. Your answer will work only for text field with same name `input[name^="quantity"]` . i guess if i change the quantity in my first item then your code will reflects to all the 'line total' text field because all have same text field name `quantity`. I don't know much about jquery just i am asking my doubt. I hope you understand my new doubt. – Dan Nov 17 '12 at 16:12
This code attaches an event handler to the onchange event of every `input` element whose name starts with `quantity`. – Mathias Becher Nov 17 '12 at 16:23
i tried your code. But my unitPrice is not appearing in my alert box i tried like this to read value `var unitprice = $(this).siblings('input[name^="unitprice"]').val(); alert("alert unit price="+unitprice);` .Alert is comming like this `alert unit price=undefined` . Why it my unitprice is not reading from my text box. & my textfield ` ` – Dan Nov 17 '12 at 17:23
Do you get any error messages in your JavaScript console? It seems to me you forgot to include the jQuery library in your page. – Mathias Becher Nov 18 '12 at 22:56
I did it. Thanks Using Change event only. – Dan Nov 19 '12 at 03:40

How to calculate values dynamically from textbox using jQuery?

2 Answers2