如何使用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
输出如下:
我不知道如何计算基础上,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>
正如@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);
});
});
但我正在使用''struts2 framwork标签用于输入字段而不是简单类型的代码,就像在html中'。你的答案能解决我的问题吗? –
您的''在发送到客户端之前将被转换为html''元素。浏览器中的JavaScript代码只能看到最终的html代码。 –
好吧,这很好。但是在这里我还有一个关于你的剧本的问题。我的项目显示在我的数据库的invoice.jsp中。我的发票中可能有20个项目。您的答案只适用于名称相同的文本字段input [name^=“quantity”]'。我猜如果我在第一个项目中更改数量,那么代码将反映到所有“行总数”文本字段,因为所有文本字段的名称都是相同的。我不太了解jquery,只是我在问我的疑问。我希望你明白我的新疑虑。 –
能否请您发布生成的HTML标记? –
20世纪90年代,他们希望他们的嵌套表回来。 – dda
@bechm http://*.com/questions/13430222/how-to-dynamically-calculate-value-in-the-text-box/13430320#13430320 –