もうかなり昔のことのような気がしますが、見積書の入力フォームを作りました。
その頃は純粋に（？）XHTML+CSS+PHPだけでやってましたので、入力結果を計算した結果を表示するページを挟んで、OKなら保存というページ遷移を行なっていました。
入力ミスを防ぐ意味で、再確認のページに遷移するのはムダではないのですが、ユーザビリティからいえば入力画面で数値を変更したら、自動的に再計算してほしいものです。
JavaScript（jQuery）にも少し慣れたので、入力フォームの自動計算をやってみることにしました。
まずググッてみたら、JavaScript で自動的に集計する方法を見つけました。
これをベースに、onkeyup を onChange に変えました。 複数ある入力欄は値をPHPに渡すために <input type="text" name="data[]" /> というように name属性が配列になっているので、document.getElementsByName("data[]") みたいな感じで取得しました。
四苦八苦してようやく動くようになったところで、今度は jQuery を使ったらどうなるかやってみました。
$(function() {
$("[name=data\\[\\]]").change(function() {
var sum = 0;
for (i =0; i < $("[name=data\\[\\]]").length; i++) {
sum += parseFloat($("[name=data\\[\\]]")[i].value);
};
$("td#sum").text(sum.toString());
});
});
これで <input type="text" name="data[]" /> の合計が、<td id="sum">{$SUM}</td> の中身（{$SUM}は合計の初期値）を置き換えます。
「data[]」のところはバックスラッシュ（￥）を二つ重ねてエスケープする必要があります。
やってみた感想としては、jQuery はセレクタが柔軟なので要素を選択し易いですね。
jQuery UI を使えるようになったら、jQuery 自体を覚える必要はないのではないかと思いましたが、そうではないようです。 あの参考書はすごく役立ちました。