1

我有一个脚本，可以在您输入值时实时计算某些字段中的值，并且运行良好。但是，如果我将值发送到数据库，然后从那里取回它们并从数据库的请求中填充字段，则不再计算字段，除非在已填充的字段中重新键入它们。

知道如何在我从数据库加载填充表单时进行计算吗？

这是 Jscript

<script type="text/javascript">

$(document).ready(function() {
    $('input[id=r],input[id=p]').change(function(e) {
        var total = 0;
        var $row = $(this).parent();
        var rate = $row.find('input[id=r]').val();
        var pack = $row.find('input[id=p]').val();

        total = parseFloat(rate * pack);
        //update the row total
        $row.find('.amount').text(total);

        var total_amount = 0;
        $('.amount').each(function() {
            //Get the value
            var am= $(this).text();
            console.log(am);
if (typeof console == "undefined") {
    this.console = {log: function() {}};
}
            //if it's a number add it to the total
            if (IsNumeric(am)) {
                total_amount += parseFloat(am, 10);
            }
        });
        $('.total_amount').text(total_amount);
    });
});

//isNumeric function Stolen from: 
//http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric

function IsNumeric(input) {
    return (input - 0) == input && input.length > 0;
}
</script>

这是HTML

        <tr>
            <td></td>
            <td>
            <div>
                <input name="a2c" type="text" size="10" value="<? echo "$a2c";?>">
                <input id="r" class="rate" name="a2q" type="text" maxlength="255" size="5" value="<? echo "$a2q";?>">
                <input id="p" class="pack" name="a2p" type="text" maxlength="255" size="5" value="<? echo "$a2p";?>">
                <span class="amount"></span></div>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
            <div>
                <input name="a3c" type="text" size="10" value="<? echo "$a3c";?>">
                <input id="r" class="rate" name="a3q" type="text" maxlength="255" size="5" value="<? echo "$a3q";?>">
                <input id="p" class="pack" name="a3p" type="text" maxlength="255" size="5" value="<? echo "$a3p";?>">
                <span class="amount"></span></div>
            </td>
        </tr>
4

4 回答 4

1

您可以强制更改事件（以防止代码重复）：http: //jsfiddle.net/2vqT5/

$(".rate").change();

于 2012-09-21T14:29:35.693 回答
0 
$('input#r').change()

将在 id 为 'r' 的输入上自动触发更改事件；够了吗？

于 2012-09-21T14:25:44.667 回答
0

您可以做的是在脚本加载时也运行您的函数。一种方法是从 .change() 中删除匿名函数，并为其命名。

function yourPreviouslyAnonymousFunction() { ... }
$(document).ready(function () {
    yourPreviouslyAnonymousFunction();
    $('input[id=r],input[id=p]').change(yourPreviouslyAnonymousFunction);
});

因为在页面加载完成时不会调用您的函数，因为您使用 PHP 注入值。这样，您的函数也会在页面加载完成时运行一次，因此这些值是使用您的函数计算的。

由于您已经在使用 jQuery，另一种方法是强制事件发生：

$(document).ready(function () {
     $('input[id=r],input[id=p]').change(function () {
         ...
         // Leave this as is
         ...
     });
     $('input[id=r],input[id=p]').change();
});

这是 MassivePenguin 解释的方式。

于 2012-09-21T14:26:55.940 回答
0

将所有逻辑放入一个单独的函数中，recalculate() {...}. 进行 .change() 事件调用recalculate()，并添加代码以在页面加载时执行：

$(document).ready(function() {
    recalculate();
});

不清楚的一件事是您如何往返于数据库。你是在做ajax，还是在做一个页面重新加载？以上适用于页面重新加载或表单提交，但如果您正在执行 ajax 调用，则必须挂钩到提交后 ajax 回调，并从那里调用 recalculate()。

于 2012-09-21T14:27:36.837 回答