我想添加一些 JavaScript 来执行以下操作。
我会有 3 个这样的字段。
<input type="text" name="a" />
<input type="text" name="b" />
<input type="hidden" name="c" />
假设我在第一个字段中输入了 100，在第二个字段中输入了 19。
它将 100 除以 19 并将其四舍五入到没有小数位，然后将第三个隐藏字段的值替换为答案，所以在这种情况下它将是 (100/19) 5.26... 向上取整到 6
但是我不确定如何实际实现这一点。
【问题讨论】：
标签： java javascript forms webforms
假设你的表单是这样的；
<form id="myForm" method="POST">
<input type="text" name="a" />
<input type="text" name="b" />
<input type="hidden" name="c" />
</form>
您可以像这样访问表单；
function doAction(action)
{
var frm = document.forms.myForm;
frm.c.value = frm.a.value/frm.b.value;
}
你可以通过添加一个可以点击的按钮，或者设置表单的提交动作来触发动作。
编辑：不四舍五入，不知道该怎么做:(
【讨论】：
一个很好的简单方法是将表单传递给函数，并允许该函数进行计算。
表格应如下所示：
<form>
<input type="text" name="a" />
<input type="text" name="b" />
<input type="hidden" name="c" />
<input type="button" value="Click" onClick="doCalculate(this.form)" />
</form>
和javascript：
function doCalculate(theForm){
var aVal = parseFloat(theForm.a.value);
var bVal = parseFloat(theForm.b.value);
var cVal = 0;
if(!isNaN(aVal) && !isNaN(bVal)){
cVal = Math.ceil(aVal/bVal);
}
theForm.c.value = cVal;
}
这里的工作示例 --> http://jsfiddle.net/azajs/
编辑：这也可以在表单提交时通过在表单的 onsubmit 中进行类似调用来完成：
<form onsubmit="doCalculate(this);" >
...
</form>
【讨论】：
一种简单的方法，假设您的表单是 document.forms[0]：
<input type="text" name="a" onchange="myFunction" />
<input type="text" name="b" onchange="myFunction" />
<input type="hidden" name="c" />
function myFunction() {
var inpA = document.forms[0].a;
var inpB = document.forms[0].b;
var aVal = parseFloat(inpA.value);
var bVal = parseFloat(inpB.value);
if (!isNaN(aVal) && !isNaN(bVal) && bVal !== 0) {
document.forms[0].c.value = Math.ceil(aVal/ bVal);
}
}
编辑：Math.round => Math.ceil
【讨论】：
Math.ceil 而不是Math.round
表单元素之后：
<script type="text/javascript">
(function() {
var a= document.getElementsByName('a')[0];
var b= document.getElementsByName('b')[0];
var c= document.getElementsByName('c')[0];
a.onchange=b.onchange=a.onkeyup=b.onkeyup= function() {
c.value= Math.ceil(a.value/b.value);
};
})();
</script>
这会在每次按键时重新计算，如果您不想这样做，请移除 keyup 绑定。
为每个输入添加一个唯一的id 并使用document.getElementById 以避免与name 产生任何歧义。如果永远不会提交此表单，您可以完全省略 name。
Math.ceil() 将返回 NaN 如果其中一个值不能被读取为数字，或 Infinity 如果你除以零。您可能希望检查这些条件并写入不同的值。
【讨论】：
您可以通过将 eventlistner 绑定到 from 元素来做到这一点。您可以创建自己的 (Javascript native event handlers) 或使用您最喜欢的 javascript 框架。我的示例是使用 jQuery jQuery bind method javascript 框架。
/* first set and id to your input hidden and form element so you can reach it in fast way */
<form id="myForm"><input type="hidden" id="total" name="c" /></form>
/* Javascript code using jquery */
$('#form').bind('submit', function () {
$('#total').val(function () {
var num = parseFloat($('#form input[name=a]').val()) / parseFloat($('#form input[name=b]').val());
return Math.floor(num) === num ? num : Math.floor(num) + 1;
});
});
【讨论】：