Question

我想添加一些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

但是我不确定如何实际实现这一点。

Answer 1

说你的表格看起来像这样;

<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;
}

您可以通过添加可以点击的按钮或设置表单的提交操作来触发操作。

编辑：不整理，不知道如何做到：（

Answer 2

一种愚蠢的方式，假设你的表格是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 =＆gt; Math.ceil

Answer 3

一个不错的简单方法是将表单传递给函数，并允许该函数进行计算。

表单应如下所示：

<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;
}

这里的工作示例 - ＆gt; http://jsfiddle.net/azajs/

编辑：当表单通过在表单的onsubmit中进行类似的调用来提交时，也可以这样做：

<form onsubmit="doCalculate(this);" >
...
</form>

Answer 4

表单元素之后：

<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将返回{{1}}。您可能希望检查这些条件并写下不同的值。

Answer 5

您可以通过将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;
    });
});

使用Javascript更改提交字段的值

5 个答案: