我正在尝试制作一个基于加权输入生成值的表单。例如,如果我们在数据库
中有以下内容**Item** _|_**Weight**
sink | 1.5
toilet | 2.5
shower | 3
和一个看起来像这样的表单,使用AJAX从数据库构建(必须使用AJAX构建,因为输入的名称和输入的数量取决于表单前一部分中的用户选择)
<form id="calculator">
...There are several field sets here...
<fieldset id="myFields">
<input type="text" class="iteminput" data-weight="1.5" name="sink" id="sink">
<input type="text" class="iteminput" data-weight="2.5" name="toilet" id="toilet">
<input type="text" class="iteminput" data-weight="3" name="shower" id="shower">
</fieldset>
</form>
如果用户输入他们有X个水槽,Y个马桶和Z个淋浴,我想自动计算他们的管道系统的总"价值",在这种情况下,X*1.5+Y*2.5+Z*3。
我挂的地方是如何获得每个输入的值。我想要做的是循环遍历#myFields中的所有输入,获得字段的值,以及data-weight属性的值,将它们相乘,然后将它们相加为运行总数。我想做所有这一切在一个函数附加到onKeyUp事件为每个输入。
感谢您的帮助,必要时可以提供更多信息。
只有Javascript是最好的解决方案,但我不反对使用jQuery,如果它大大简化了答案。下面是一个jQuery示例:
你应该能够得到一个模糊函数的输入值。然后通过在输入上运行each函数来更新值。像这样…
<ul>
<li>
<label>Number of X</label>
<input type="text" value="" id="x"/>
</li>
<li>
<label>Number of Y</label>
<input type="text" value="" id="y"/>
</li>
<li>
<label>Number of Z</label>
<input type="text" value="" id="z"/>
</li>
</ul>
<p>Total is: <span class="total"></span>
jQuery: $('input').blur(function () {
var total = 0;
$('input').each(function() {
total += Number($(this).val());
});
$('.total').text(total);
});
演示:http://jsfiddle.net/DYzsR/1/
这就是我最后所做的。
function calcFixtures()
{
var elements = [];
var total = 0;
elements = document.getElementsByClassName('fixtureinput');
for (var i=0; i<elements.length; i++) {
total += elements[i].value * elements[i].getAttribute("data-weight");
}
}
逻辑存在,获取具有特定类的所有元素,循环遍历它们,对于每个元素,获取data-weight属性的值并将其乘以该元素的当前表单值。感谢@Kris将其作为一个运行总数而不是单个计算的想法。