如何使用jQuery从文本框动态计算值?

问题描述:

我有一个invoice.jsp页面,我必须使用jQuery或以任何其他方式计算文本框中的某些值。如何使用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输出如下: enter image description here

我不知道如何计算基础上,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> 
+0

能否请您发布生成的HTML标记? –

+2

20世纪90年代,他们希望他们的嵌套表回来。 – dda

+0

@bechm http://*.com/questions/13430222/how-to-dynamically-calculate-value-in-the-text-box/13430320#13430320 –

正如@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); 
    }); 
}); 
+0

但我正在使用''struts2 framwork标签用于输入字段而不是简单类型的代码,就像在html中'。你的答案能解决我的问题吗? –

+0

您的''在发送到客户端之前将被转换为html''元素。浏览器中的JavaScript代码只能看到最终的html代码。 –

+0

好吧,这很好。但是在这里我还有一个关于你的剧本的问题。我的项目显示在我的数据库的invoice.jsp中。我的发票中可能有20个项目。您的答案只适用于名称相同的文本字段input [name^=“quantity”]'。我猜如果我在第一个项目中更改数量,那么代码将反映到所有“行总数”文本字段,因为所有文本字段的名称都是相同的。我不太了解jquery,只是我在问我的疑问。我希望你明白我的新疑虑。 –

使用.change()

jQuery Docs - Change