javascript - 使用表单数据执行计算并将它们解析回表单

Question

我对 javascript 完全是菜鸟，但我有一个很好的问题要解决。

我有一个从数据库接收数据的表单。

我编写了一个非常简单的 javascript，它本身执行我希望它执行的计算。但是我怎样才能将计算出的值返回到表单中。我想使用 onkeyup 以便在发送表单之前更新数据。

此时我只有表单和单独的 javascript。但我不知道如何让他们一起工作。我知道 javascript 中的 document.write 语句不会在表单中起作用。这个，我只是用来构建和检查我的计算器。

impru_rest 值一填入，计算就必须开始。它必须将 impru_dobanda 和/或 impru_sold 的新值发送回表单。

有什么想法吗？

这是表格的一部分

<?php 
    // create form according to existing loan/interest
    echo '<td><div align="center"><input type="text" size="11" name="impru_acc" value = '.$impru_acc.'></div></td>';
    echo '<td><div align="center"><input type="text" size="11" name="impru_rest" onkeyup= value = ""></div></td>';
    echo '<td><div align="center"><input type="text" size="11" name="impru_sold" value = '.$impru_sold.'></div></td>';
    echo '<td><div align="center"><input type="text" size="11" name="impru_dobanda" value = '.$impru_dobanda.'></div></td>';    
>?

这是计算

<script type=\"text/javascript\">

var impru_acc = ".$impru_acc.";
var impru_dobanda = ".$impru_dobanda.";
var impru_rest = ".$impru_rest.";
var impru_sold = ".$impru_sold.";

if (impru_dobanda>0) {
    var difference = impru_dobanda-impru_rest;
    } else {
        var difference = 0;
        }

if (difference > 0) {
    impru_dobanda = impru_dobanda - impru_rest;
    document.write(impru_sold);
    document.write(impru_dobanda); 
    }

if (difference < 0) {
    impru_sold = difference + impru_sold;
    impru_dobanda = 0;
    document.write(impru_sold);
    document.write(impru_dobanda);
    }

if (difference == 0) {
    impru_dobanda = 0;
    var impru_sold=impru_sold-impru_rest;
    document.write(impru_sold);
    document.write(impru_dobanda);
}
</script>

在 Allen123 和 tinyByte 的帮助下我得到了这个，但它没有做任何事情:

我现在在标题中添加了 jquery 注释。

我可能在函数中犯了错误，但现在似乎什么也没有发生。我想脚本不会影响表单中的值这就是我所拥有的。我做错了什么？

<?php
            // create form according to existing loan/interetest
            echo '<td><div align="center"><input type="text" size="11" name="impru_acc" value = '.$impru_acc.'></div></td>';
            echo '<td><div align="center"><input type="text" size="11" name="impru_rest" onkeyup=calculateAll(); value = ""></div></td>';
            echo '<td><div align="center"><input type="text" size="11" name="impru_sold" value = '.$impru_sold.'></div></td>';
            echo '<td><div align="center"><input type="text" size="11" name="impru_dobanda" value = '.$impru_dobanda.'></div></td>';    
    ?>      
            <script>
        function calculateAll(){ 
        var impru_acc = $('input[name="impru_acc"]').val();
        var impru_dobanda = $('input[name="impru_dobanda"]').val();
        var impru_rest = $('input[name="impru_rest"]').val();
        var impru_sold = $('input[name="impru_sold"]').val();

        if (impru_dobanda>0) {
            var difference = impru_dobanda-impru_rest;
            } else {
                var difference = 0;
                }
            if (difference > 0) {
                impru_dobanda = impru_dobanda - impru_rest;
                }
            if (difference < 0) {
                impru_sold = difference + impru_sold;
                impru_dobanda = 0;
                }
            if (difference == 0) {
                impru_dobanda = 0;
                var impru_sold=impru_sold-impru_rest;
            }
        }
    $(document).ready(function(){
       $('input').change(function(){
          calculateAll();
       });
    });

Answer 1

将你的计算写在一个函数中并在 focus out 或 change 上触发它，就像这样:

$('input').change(function(){
   calculateAll();
});

更新:第 1 组:在您的 header 中包含一个缩小的 jquery，例如:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后在脚本 tag() 中使用上面的代码。最好将它放在 html 标记的末尾。

不要忘记将所有 jQuery 代码放入:

<script>
function calculateAll(){
   //implement your logic here 
   var value1 = $('input[name="somename"]').val();
    .
    .
    .
}
$(document).ready(function(){
   $('input').change(function(){
      calculateAll();
   });
});
</script>