作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个表单,它会自动计算用户输入的值,最好使用 jQuery/javascript,我不知道如何做到这一点,但对所需的逻辑有一个大概的了解(我不是专家,所以请随意纠正我) - 我创建了一个虚拟图像来帮助解释我想要做什么。
我有一个表单,其中有许多输入字段,只要已选择每个表,就会自动计算每个表的总金额。使用 jQuery - 我希望逻辑是这样的 -i) 查找输入字段元素ii) 查找表中所有具有值的文本字段iii) 将这些添加在一起并显示在“总计”表单字段中
虽然我对 PHP 很熟悉,但有时我仍然对 javascript 感到困惑 - 如果您能提供任何帮助,我将不胜感激,如果可能的话,请提供快速概述以帮助我从代码中学习。
提前致谢
最佳答案
试试这个:http://jsfiddle.net/Ajkkb/26/
<div>
<input name="r" class="rate" type="text" maxlength="255" size="5" value=""/>
<input name="p" class="pack" type="text" maxlength="255" size="5" value=""/>
<input name="b" class="bag" type="text" maxlength="255" size="5" value=""/>
<input name="w" class="weight" type="text" maxlength="255" size="5" value=""/>
<span class="amount"></span>
</div>
<div>
<input name="r" class="rate" type="text" maxlength="255" size="5" value=""/>
<input name="p" class="pack" type="text" maxlength="255" size="5" value=""/>
<input name="b" class="bag" type="text" maxlength="255" size="5" value=""/>
<input name="w" class="weight" type="text" maxlength="255" size="5" value=""/>
<span class="amount"></span>
</div>
<div>
<input name="r" class="rate" type="text" maxlength="255" size="5" value=""/>
<input name="p" class="pack" type="text" maxlength="255" size="5" value=""/>
<input name="b" class="bag" type="text" maxlength="255" size="5" value=""/>
<input name="w" class="weight" type="text" maxlength="255" size="5" value=""/>
<span class="amount"></span>
</div>
<div class="total_amount">total</div>
$(document).ready(function() {
$('input[name=r],input[name=p]').change(function(e) {
var total = 0;
var $row = $(this).parent();
var rate = $row.find('input[name=r]').val();
var pack = $row.find('input[name=p]').val();
total = parseFloat(rate * pack)*100;
//update the row total
$row.find('.amount').text(total);
var total_amount = 0;
$('.amount').each(function() {
//Get the value
var am= $(this).text();
console.log(am);
//if it's a number add it to the total
if (IsNumeric(am)) {
total_amount += parseFloat(am, 10);
}
});
$('.total_amount').text(total_amount);
});
});
//isNumeric function Stolen from:
//http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
function IsNumeric(input) {
return (input - 0) == input && input.length > 0;
}
关于php - 使用 jQuery 计算插件自动计算表单字段值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4615655/
我尝试通过正则表达式将文本中的单引号更改为双引号。 (单字)示例:我走了。 You gona fly to planet 'Ziqtos' => 我需要在 I'm 中保留单引号,并在 You gona
我正在构建一个 API,其中大部分将包含 JSON 和 HTML 内容。但是一些非常具体的端点只呈现 true 或 false,并且还在 POST 中接受 true 或 false。这是请求或响应的整
我是一名优秀的程序员,十分优秀!