试图根据用户输入获得总金额 [英] Trying to get total amount based on user input
问题描述
我有一个用户可以提交表单的页面,工作正常,但我想要一个数量字段,用户可以在其中输入一个数字,在总数框中它将显示总数,因为他们更新数量。我想实现这一点,而不必重新加载页面。我认为JavaScript会是最好的做,但我不确定如何去做,因为我有JavaScript的经验。任何帮助非常感谢!!!
I have a page where a user can submit a form, that works fine, but I want to have a quantity field where the user can input a number and in the totals box it will show the total as they update their quantity. I would like to achieve this without having to reload the page. I am thinking javascript would be the best to do this, but I am unsure of how to go about doing it as I have 0 experience with javascript. Any help is greatly appreciated!!!
我的代码到目前为止:
<form>
<table align="center">
<tr>
<td colspan="3" align="center"><img src="<?php echo getProductImage($product_id); ?>" title="<?php echo getProductName($product_id); ?>" /></td>
</tr>
<tr>
<td colspan="3"><br/></td>
</tr>
<tr>
<td align="center">Quantity:</td>
<td colspan="2"></td>
</tr>
<tr>
<td><input type="number" min="64" max="9999" name="quantity" /></td>
<td> @ $<?php echo number_format((getProductPrice($product_id)/2),4); ?>/per item = </td>
<td>Total Goes Here</td>
</tr>
</table>
</form>
推荐答案
请参阅 this JSFiddle(注意添加的 data-product-price
属性)
See this JSFiddle (notice the added data-product-price
attribute)
HTML
<table align="center">
<tr>
<td align="center">Quantity:</td>
<td colspan="2"></td>
</tr>
<tr>
<td><input type="number" min="64" max="9999" name="quantity" /></td>
<td> @ $345.50/per item = </td>
<td data-product-price="345.50"></td>
</tr>
</table>
JavaScript
JavaScript
$(function(){
$("input[name='quantity']").on("input", function(){
var $outputCell = $(this).parent().siblings("[data-product-price]").eq(0);
$outputCell.html((+$outputCell.data("product-price") * +$(this).val()).toFixed(2));
});
});
这篇关于试图根据用户输入获得总金额的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!