使用jquery自动用数学更新输入字段?

时间:2012-01-17 19:05:25

标签: jquery forms

好的我需要一些帮助,我有一个在线计算器,我必须从两个输入字段中获取直线计。我需要它在输入数据时是自动的。我不知道如何做到这一点..任何编码帮助将不胜感激!这是html:

<input type="text" name="ancho" />
<input type="text" name="alto" />
<input type="text" name="material" />

我需要输出到这个字段:

<input type="text" name="ml" />

以下是数学方面的等式: (材料/ 100)/((alto / 100)*(ancho / 100))

提前感谢您的帮助!

4 个答案:

答案 0 :(得分:5)

叹息我在解决方案中没有看到很多错误检查,所以我想我会再发布一个 ......

// locate all the input fields on the page
$(':input')
// bind to anything change related (down to keyboard changes so the element
// won't need to lose focus, or the user won't have to press enter)
.bind('keypress keydown keyup change',function(){
    // retrieve the values of the inputs (we also call parseFloat to confirm
    // we are dealing with numeric values)
    var acho = parseFloat($(':input[name="acho"]').val(),10),
        alto = parseFloat($(':input[name="alto"]').val(),10),
        matl = parseFloat($(':input[name="material"]').val(),10);

    // default the end result to an empty string (you'll see
    // why with the following statement)
    var v = '';

    // confirm that all three values that go in to the equation are
    // all numbers before we try to perform any math functions. If
    // all goes well, "v" above will have the actual resulting value.
    // if any number is invalid, the "Result" field (ml) gets emptied
    if (!isNaN(acho) && !isNaN(alto) && !isNaN(matl)){

        // your math function
        v = (matl / 100) / ((alto / 100) * (acho / 100));
    }

    // replace the value of "ml" with our new calculated value
    $(':input[name="ml"]').val(v.toString());
});

... With a demo

答案 1 :(得分:2)

试试这个:

$('input[name="material"],input[name="ancho"],input[name="alto"]').change(function(){
$('input[name="ml"]').val(($('input[name="material"]').val() / 100) / (($('input[name="alto"]').val() / 100) * ($('input[name="ancho"]').val() / 100)));
})

jsFiddle

答案 2 :(得分:0)

使用$('input[name="yourName"]').val()获取每个输入的值,然后应用您的公式。

要将最终结果设置为结果框,请使用$('input[name="yourName"]').val(results)

类似的东西:

$('input').blur(function(){
   //Get values
   var ancho= $('input[name="ancho"]').val();
   var alto= $('input[name="alto"]').val();
   var material= $('input[name="material"]').val();
   //Calculate results
    var results =  (material/100) / ((alto/100) * (ancho/100));

   //update output
   $('input[name="ml"]').val(results);
});

您可以在blur/change event处理程序中为您的输入提供逻辑

jsFiddle

答案 3 :(得分:0)

当您键入任何字段时,这将更新。虽然未经测试。

$('input').keyup(function(){
    var material = $('input[name="material"]').val(),
    alto = $('input[name="alto"]').val(),
    ancho = $('input[name="ancho"]').val(),
    result;

    if (material != "" && alto != "" && ancho != ""){
        result = (material/100) / ((alto/100) * (ancho/100));
        $('input[name="ml"]').val(result);
    }
});