javascriptの階段

現在開発しているオンライン請求書発行システムで、住所入力の負担を減らすために、郵便番号から住所を検索して自動で表示させる機能をPHPで開発していた。

しかしこれだと、「郵便番号を入力→検索ボタン」のフォームと、「検索結果を反映し、住所を表示させる」フォームの2つのフォームが必要となり、ユーザビリティー的にもわかりにくい部分があった。

また、商品毎に単価x数量=合計金額を表示させる場合でも、PHPのみで完結させようとする場合、その都度「計算」ボタンをクリックさせる必要があるなど使いずらい。

そこで、「郵便番号から住所を検索して自動で表示させる」機能と、「商品毎に単価x数量=合計金額を表示させる」機能にJavaScriptを使用することにした。

そもそも、Javascriptに関しては本格的に学習をしたことがないし、Ajaxも少しかじっただけで、これまで本気で取り組もうと思ったことがなかった。

言い訳になるが、PHPでZendFramework等をマスターすることを優先し、クライアントサイドの技術に関しては、あくまでオマケ的に考えていた部分があった。
（そもそも、余裕ができればFLEXに取り組もうと考えていた）

以下、実装の方法。

■「郵便番号から住所を検索して自動で表示させる」機能
ググったところ、下記のサイトがヒットした。
http://kawa.net/works/ajax/ajaxzip2/ajaxzip2.html#download
郵便番号辞書データも2008年11月2日付けの新しいデータが用意されていたので、今回はこれをそのまま使用することにした。

■「商品毎に単価x数量=合計金額を表示させる」機能
当初Ajaxのいいサンプルがないか探してみたが、すぐに見つからなかったのと、そもそも乗算程度の機能であれば、Javascriptのみで充分なことに気がつき、ネットと書籍で調べて以下の記述で対応した。

<!--
// 合計金額を計算
function calc(CL){
// ビルトイン関数「eval()」を使うことで、フォームに入力された文字列の内容を
// 数値や演算子として評価し、Javascriptで計算できるようにしている。
CL.goukei.value = eval(CL.num.value)*eval(CL.tanka.value);
}
-->

<form method="post" action="">
<table cellspacing="0">
<tr>
<th scope="col" width="240">品名</th>
<th scope="col" width="80">数量</th>
<th scope="col" width="80">単価（円）</th>
<th scope="col" width="100">合計金額（円）</th>
</tr>
<tr>
<td><input type="text" name="hinemi" size="10" /></td>
<td><input type="text" name="num" size="5" maxlength="8" value="0" onChange="calc(this.form)" /></td>
<td><input type="text" name="tanka" size="5" maxlength="8" value="0" onChange="calc(this.form)" /></td>
<td><input type="text" name="goukei" size="5" maxlength="8" /></td>
</tr>
</table>
</form>

やっぱり、JavaScriptももう少しできるようになる必要があるので、この機会にBlogに色々メモっていくことにする。