2013-11-21 116 views
-4

我想用jQuery來更新一個變量(當前是一個PHP變量,但顯然它需要是一個js變量),以便當用戶更改多個輸入字段中的值時它會創建一個動態變化的運行總數。jQuery - 當輸入值改變時更新變量

理想情況下,它還會在超過上限時發出警告。

當前代碼:

<?php 
$counter = 0; 
$expected_qty = 24; 
?> 

<div class="jumbotron text-center"> 
    <p>Running Total:</p> 
    <h2> 
     <span class='running_total'> 
      <?php print $counter; ?> 
     </span>/<span class='max_qty'> 
      <?php print $expected_qty; ?> 
     </span> 
    </h2> 
</div> 

<div class="col-xs-12 col-sm-8 col-md-9"> 
    <div class="table-responsive"> 
     <table class="table"> 
      <tr> 
      <td> 
       <input class='qty_field' type='number' name='input1' value=''/> 
      </td> 
      </tr> 
      <tr> 
      <td> 
       <input class='qty_field' type='number' name='input2' value=''/> 
      </td> 
      </tr> 
     </table> 
    </div> 
</div> 

jQuery的目前模糊運行如下:

$('body').on('blur', '.qty_field', function() { 
var sum = 0; 
$('.qty_field').each(function() { 
    sum += Number($(this).val()); 
}); 
//Write sum to run 
    $('running_total').html(sum); 


}); 

我希望在

雖然在本例中不落實,存在功能動態添加更多的表格行,但腳本已將此考慮在內

編輯 - 更詳細地更新...

+0

PLZ提供jQuery代碼u必須使用 – Bhadra

+1

給我們您的JS代碼 – FBHY

+0

我還沒有實現jQuery的呢。我在問怎麼做。 – Optimaximal

回答

2

有了一些調整JS和HTML,下面的代碼工作...

$('body').on('keyup', '.qty_field', function() { 
var sum = 0; 
$('.qty_field').each(function() { 
    sum += Number($(this).val()); 
}); 

    $('.running_total').html(sum); 
}); 
0

這是一個使用AngularJS的典型案例。看看這個。有了jQuery,實現這一點將是一件可怕的事情。使用Angular,只需要幾行代碼。

+0

謝謝,現在看着Angular。 – Optimaximal