問題
フォーム内で複数の入力した数値の合計をリアルタイムで表示するには？
解決策
- 合計する対象の入力フィールドに共通のクラスを設定する。
- javascriptで共通クラスを持つ入力フィールドに入力された数値を一通り加算し、合計値を表示させる。
数値の合計をリアルタイムで表示する
フォーム内で複数の入力した数値の合計をリアルタイムで表示する方法をご紹介します。
DEMOはこちら
| 円 | |
| 円 | |
| 円 | |
| 円 | |
| 円 |
合計 円
HTMLはこちら
<div class="section-ss">
<table class="type02 sp-block td-tal usergroup user01">
<tbody>
<tr>
<th scope="row"><label for="num01">商品01</label></th>
<td><input type="number" id="num01" class="num input-text" name="num01" size="60"> 円</td>
</tr>
<tr>
<th scope="row"><label for="num02">商品02</label></th>
<td><input type="number" id="num02" class="num input-text" name="num02" size="60"> 円</td>
</tr>
<tr>
<th scope="row"><label for="num03">商品03</label></th>
<td><input type="number" id="num03" class="num input-text" name="num03" size="60"> 円</td>
</tr>
<tr>
<th scope="row"><label for="num04">商品04</label></th>
<td><input type="number" id="num04" class="num input-text" name="num04" size="60"> 円</td>
</tr>
<tr>
<th scope="row"><label for="num05">商品05</label></th>
<td><input type="number" id="num05" class="num input-text" name="num05" size="60"> 円</td>
</tr>
</tbody>
</table>
</div>
<div class="box-type03">
<p class="text str">合計 <span class="total-num large"></span> 円</p>
</div>ポイント!
- 合計させるinputに共通のクラスを持たせます。
javascriptの記述例はこちら
if( $('.total-num').length ){
var total_num = 0;
$('.total-num').html( total_num );
var current_num = 0;
$("input.num").change(function() {
if( countTimer !== null ){ clearInterval(countTimer); }
current_num = 0;
for(var i = 0; i < $("input.num").length; i++){
var num = $("input.num").eq(i).val();
current_num = current_num + Number( num );
}
var counter = setInterval(function(){
if( total_num != current_num ){
if( total_num > current_num ){
total_num = total_num - Math.round((total_num - current_num) / 2);
$('.total-num').html( total_num );
}
if( total_num < current_num ){
total_num = total_num + Math.round((current_num - total_num) / 2);
$('.total-num').html( total_num );
};
}else{
clearInterval( counter );
}
}, 17);
});
}ポイント!
- 「$(“input.num”).change(function() { … })」で合計させるinputのいずれかの値が変更されたら処理を開始します。
- 合計させるinputの数だけfor文で繰り返し処理をして、「parseInt( $(“input.num”).eq(i).val(), 10 )」で各inputに入力された値を取得し、「current_num = current_num + num;」で合計用の変数に加算していきます。
- 「setInterval」で、合計値へ向けて表示用の数値を1ずつ加算または減算していきます。
- 「setInterval」の処理内で「$(‘.total-num’).html( total_num )」を行い、表示用の数値を都度表示することで、リアルタイムで数値をなめらかに変化させます。
- 表示用の値が合計値と同じになったら「clearInterval(countTimer)」で処理を終了し、「countTimer = null;」でタイマー用の変数にnullを渡します。
- 「if( countTimer !== null ){ clearInterval(countTimer); }」でタイマー用の変数の値がnullでないならば処理を事前に終了することで、重複でsetIntervalを行わないようにします。
参考ページ
以下のサイトが、より詳しく解説してくれています。
【複数inputに入力された数字の合計を表示する | かちびと.net】
http://kachibito.net/snippets/calculate-sum-of-all-textbox-values-in-a-table-column
【jQueryで数字をカウントアップしながら表示する方法 | BlackFlag】
http://black-flag.net/jquery/20161108-6221.html
【setIntervalが実行中でなかったらsetIntervalを実行する(SmoothScroll) – 素人がプログラミングを勉強していたブログ】
http://javascripter.hatenablog.com/entry/20080503/1209802669
コメント