1

値を入力した瞬間にいくつかのフィールドの値をリアルタイムで計算するスクリプトがあり、正常に動作しています。ただし、値をデータベースに送信し、そこから値を取得して、データベースからのリクエストからフィールドに入力すると、すでに入力されているフィールドに再入力されない限り、フィールドは計算されなくなります。

データベースから入力されたフォームをロードした瞬間に計算を開始するにはどうすればよいでしょうか?

これはJスクリプトです

<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

できることは、スクリプトの読み込み時に関数も実行することです。これを行う 1 つの方法は、無名関数を .change() から削除し、それに名前を付けることです。

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

PHPを使用して値を挿入するため、ページの読み込みが完了したときに関数が呼び出されないためです。このようにして、ページの読み込みが完了すると関数も 1 回実行されるため、関数を使用して値が計算されます。

すでに 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();
});

明確でないことの 1 つは、データベースへのラウンドトリップ方法です。ajax を実行していますか、それともページのリロードを実行していますか? 上記はページのリロードまたはフォーム送信に対して機能しますが、ajax 呼び出しを行っている場合は、送信後の ajax コールバックにフックし、そこから recalculate() を呼び出す必要があります。

于 2012-09-21T14:27:36.837 に答える
0 
$('input#r').change()

'r' の id を持つ入力で変更イベントを自動的に発生させます。それで十分でしょうか？

于 2012-09-21T14:25:44.667 に答える