如何使用 jQuery 从文本框中动态计算值？答案

【问题标题】：How to calculate values dynamically from textbox using jQuery?如何使用 jQuery 从文本框中动态计算值？
【发布时间】：2012-11-17 13:45:33
【问题描述】：

我有一个invoice.jsp 页面，我必须使用 jQuery 或任何其他方式计算文本框中的一些值。

我对 jQuery 了解不多。请帮我解决这个问题。

在我的发票中有一个数量文本框。如果用户输入数量，则计算出的价格应动态计算，即(total_subPrice= unit_price * quantity)，并显示在另一个名为“价格”的文本框中。

所有价格的总和应该在按钮中显示为总计。

请注意：所有行值都来自我的数据库表，基于用户对项目的选择。

我仅使用此代码在我的invoice.jsp 页面中显示值：

<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>

我的invoice.jsp 输出如下所示：

我不知道如何根据选择的数量计算line Total，并在总计文本框中显示所有line total 的总和（见下面的发票图片）。

我也尝试了this，但我仍然无法解决我的问题。

我的完整 JSP 代码：

<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>

【问题讨论】：

能否请您发布生成的 HTML 标记？
1990 年代打来电话，他们想要他们的嵌套表回来。
@bechm stackoverflow.com/questions/13430222/…
@dda 你所说的“1990 年代被称为，他们想要他们的嵌套表回来”是什么意思？
他试图搞笑，并指出使用表格进行布局是一个坏主意，因为它会导致无法维护的代码，缺乏任何语义含义。这并不是说表格不好，对于表格数据的呈现它们是完美，但是在这一点上，将它们用于布局几乎是不合时宜的.

标签： javascript jquery struts2 ognl

【解决方案1】：

正如@flow 所说，使用 .change()：

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

【讨论】：

但我使用 <s:textfield name="quantity" value="%{quantity}" size="2" /> struts2 框架标签作为输入字段，而不是像 html <input type="text" name="quantity" value="3" size="2" /> 这样的简单代码类型。你的回答能解决我的问题吗？
您的<s:textfield ... /> 将在发送到客户端之前转换为html <input ... /> 元素。浏览器中的 JavaScript 代码只能看到这个最终的 html 代码。
好的，没关系。但是在这里，我对您的脚本还有另一个问题。我的项目显示在我的数据库中的 invoice.jsp 中。我的发票中可能有 20 件商品。您的答案仅适用于具有相同名称的文本字段 input[name^="quantity"] 。我想如果我更改第一项中的数量，那么您的代码将反映到所有“总行”文本字段，因为所有文本字段名称都相同 quantity。我对 jquery 了解不多，只是我在问我的疑问。我希望你能理解我的新疑问。
此代码将一个事件处理程序附加到每个名称以quantity 开头的input 元素的onchange 事件。
我试过你的代码。但是我的 unitPrice 没有出现在我的警报框中，我尝试像这样读取值 var unitprice = $(this).siblings('input[name^="unitprice"]').val(); alert("alert unit price="+unitprice); 。警报就像这样 alert unit price=undefined 。为什么我的单价没有从我的文本框中读取。和我的文本字段<s:textfield name="unitprice" value="%{price}" size="4"/>

【解决方案2】：

在您的输入中使用.change()。

jQuery Docs - Change

【讨论】：