1

私はお金の値の入力フィールドを持つフォームを持っています。その値はキーアップ イベントで合計され、合計が別の入力フィールドに挿入されます。これはうまくいきます。

<table id="itemsqty"><tr><th style="min-width: 4em;">Qty</th><th style="min-width: 10em;">Description</th><th style="width: 4em;">Price</th></tr>
<tr><td><select name="qty[]" id="qty0"><option selected="selected">1</option>    <option>2</option><option>3</option><option>4</option><option>5</option></select></td><td>    <input placeholder="Enter item name in here" type="text" name="item[]" id="item0" /></td>    <td><input class="itemprice" placeholder="Total price for this item" type="text"      name="itemprice[]" id="itemprice0" /></td></tr>
<tr><td><select name="qty[]" id="qty1"><option selected="selected">1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></td><td><input placeholder="Enter item name in here" type="text" name="item[]" id="item1" /></td><td><input class="itemprice" placeholder="Total price for this item" type="text"  name="itemprice[]" id="itemprice1" /></td></tr>
<tr><td><select name="qty[]" id="qty2"><option selected="selected">1</option>   <option>2</option><option>3</option><option>4</option><option>5</option></select></td><td>  <input placeholder="Enter item name in here" type="text" name="item[]" id="item2" /></td><td><input class="itemprice" placeholder="Total price for this item" type="text"  name="itemprice[]" id="itemprice2" /></td></tr>
<tr id="totalrow"><td><a href="javascript:;" id="addanotherlnk">Add another item</a></td><td style="text-align: right;padding-right: 7px;float: right;"><label for="gtotal" >Total:</label></td><td><input readonly type="text" name="gtotal" id="gtotal" value="£0.00" /></td></tr></table>

合計入力フィールド (#gtotal) の値は、このスクリプトを使用して更新され、正常に動作します。

$('.itemprice').live("keyup", function (event) {
    var t = 0;
    for (var ip=0; ip <3; ip++){
        a = $('#itemprice'+ip).val();
        a = a.replace("£","");
        //t = t + a;
        t = Number(t) + Number(a);
    }

    //then add all values
    $('#gtotal').val('');
    var formattedMoney = '£' + t.formatMoney(2,',','.');
    $('#gtotal').val(formattedMoney);
});

ユーザーは、このスクリプトを起動するリンクを使用して新しいフィールドを追加できます。

$('#addanotherlnk').click(function(){
    //count number of items of same class
    var ic;
    ic = $('.itemprice').length;

    $('<tr><td><select name="qty[]" id="qty'+ic+'"><option selected="selected">1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></td><td><input placeholder="Enter item name in here" type="text" name="item[]" id="item'+ic+'" /></td><td><input class="itemprice" placeholder="Total price for this item" type="text"  name="itemprice[]" id="itemprice'+ic+'" /></tr>').insertBefore('#totalrow');
});

これは正常に機能し、一意の ID を入力に追加します。ただし、合計を更新するスクリプトは、この新しい入力フィールドを認識していないようです。これは動的に追加されたフィールドであるという事実と関係があることを知っているため、なぜ jquery .live() メソッドを使用しましたが、これで問題は解決しませんでした。

すべてのヘルプは非常に高く評価されています。

4

2 に答える 2

0

あなたの場合の問題は... forループで3をハードコードしているため、3入力の値を取り、動的に追加された入力は実際には合計に追加されません...

合計計算を行う関数を作成することをお勧めします...そしてそれをkeyup関数で呼び出します

これを試して：

function sumItemprice()  // function to calculate the sum
{
   var sum=0;
   $.each($('input.itemprice'),function(){ //select all ur input with the classname
     //add only if the value is number
      if(!isNaN($(this).val()) && $(this).val().length!=0)
      {
          sum += parseFloat($(this).val());  // DO YOUR STUFF HERE (REPLACE or sumthing..)
      }
   });

  $('#gtotal').val(sum);
}

キーアップ機能

$('.itemprice').bind("keyup",sumItemprice);

注: live() は非推奨です。on() を使用することをお勧めします。

于 2012-11-21T05:06:37.637 に答える
0

keyup ハンドラーは、最初の 3 つの要素のみをループするようにコード化されています。3 つの制限をハードコーディングしています。

for (var ip=0; ip <3; ip++){

代わりに、「itemprice」クラスを使用してすべての要素をループする必要があります。

var t = 0;
$('.itemprice').each(function() {
    t += Number( this.value.replace("£","") );
}
于 2012-11-21T05:05:08.870 に答える