我有一个页面,用户可以提交表单,工作正常,但我希望有一个数量字段,用户可以在其中输入数字,在总计框中,它将显示总数,因为他们更新了数量。我想实现这一点,而无需重新加载页面。我认为javascript将是最好的,但我不确定如何去做,因为我有0经验的JavaScript。非常感谢任何帮助!!!
我的代码:
<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>
答案 0 :(得分:1)
请参阅this JSFiddle(请注意添加的data-product-price
属性)
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
$(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));
});
});
答案 1 :(得分:0)
您可以尝试通过回显已禁用输入中的价格/每件商品,或者添加一个隐藏的输入,该值是每个产品的价格。
然后你可以尝试这个JS:
public function view($id) {
// logic to load post by ID
// ...
}
这是通过使用jQuery。
以下是工作示例:
答案 2 :(得分:0)
使用jQuery和Javascript的最小示例可能是:
<form>
Quantity: <input type="text" id="quantityField">
<div>Total: <span id="totalField">0</span> $ (5$/item)</div>
</form>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
// The line above loads jQuery
// Javascript code goes here. You would normally have this in a separate file.
// Somehow fetch the desired price from your program
var pricePerItem = 5;
// This code executes when the quantityField elements value changes
$('#quantityField').on('input',function(event){
// 1. Read quantity
var quantity = $(this).val();
// 2. Calculate total
var total = pricePerItem * quantity;
// 3. Update total field
$('#totalField').text(total);
});
</script>
&#13;
请注意,这是一个最小的示例,它不遵循编程javascript中有关安全性,代码放置等方面的最佳实践,但它可能只是帮助您的方式。