Javascript:「ajaxzip3」で郵便番号から住所を自動入力

お問い合わせフォームなどで郵便番号を入力すると自動住所が入力されるフォームがあります。

郵便番号検索ができる「ajaxzip3」を使用すると簡単に設置することが可能です。
ユーザビリティの向上にもなると思うし、とても使いやすいです。

下記に「ajaxzip3」を設置した時の方法をメモします。

ajaxzip3


「ajaxzip3」の使用方法

今回、都道府県をセレクトボックスを使用して設置してます。

Javascript

下記のJSファイルを読み込みます。

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js"></script>

httpsの場合は下記を記述します。

<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js"></script>

PHP

<?php
// 都道府県
function get_pref() {
    return array(
        1 => '北海道',
        2 => '青森県',
        3 => '岩手県',
        4 => '宮城県',
        5 => '秋田県',
        6 => '山形県',
        7 => '福島県',
        8 => '茨城県',
        9 => '栃木県',
        10 => '群馬県',
        11 => '埼玉県',
        12 => '千葉県',
        13 => '東京都',
        14 => '神奈川県',
        15 => '新潟県',
        16 => '富山県',
        17 => '石川県',
        18 => '福井県',
        19 => '山梨県',
        20 => '長野県',
        21 => '岐阜県',
        22 => '静岡県',
        23 => '愛知県',
        24 => '三重県',
        25 => '滋賀県',
        26 => '京都府',
        27 => '大阪府',
        28 => '兵庫県',
        29 => '奈良県',
        30 => '和歌山県',
        31 => '鳥取県',
        32 => '島根県',
        33 => '岡山県',
        34 => '広島県',
        35 => '山口県',
        36 => '徳島県',
        37 => '香川県',
        38 => '愛媛県',
        39 => '高知県',
        40 => '福岡県',
        41 => '佐賀県',
        42 => '長崎県',
        43 => '熊本県',
        44 => '大分県',
        45 => '宮崎県',
        46 => '鹿児島県',
        47 => '沖縄県'
    );
}
?>

HTML

郵便番号を2つのテキストボックスに分けています。
郵便番号のテキストボックスは1つでも可能です。

<input type="text" name="zip1" value="" maxlength="3" /> - 
<input type="text" name="zip2" value="" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','pref','address');" />
<br>
<select name="pref">
    <option value="">選択</option>
    <?php foreach (get_pref() as $key => $value): ?>
    <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
    <?php endforeach; ?>
</select>
<br>
<input type="text" name="address" value="" />

2つ目の郵便番号の入力が終わると自動的に住所が入力されます。

Javascript:ボタン押下時、確認メッセージを出力

submitボタンを押したときに確認メッセージボックスを出力し、「OK」が押された時のみサブミットしたい場合があります。
Javascriptを使用してsubmitボタン押下時に確認メッセージを出力する方法をメモします。

いつも忘れてしまいます。。。


onclick時にconfirm()を使用し、ダイアログを出力

<input type="submit" value="実行" onclick="return confirm('実行しますか?');">

「OK」をクリックした時はtrueを返し、「キャンセル」をクリックした時はfalseを返します。


「OK」と「キャンセル」で処理を分岐する

Javascript

<script type="text/javascript">
function submitbtn() {
    // 「OK」ボタン押下時
    if (confirm('実行しますか?')) {
        alert('OK');
    }
    // 「キャンセル」ボタン押下時
    else {
        alert('キャンセル');
    }
}
</script>

HTML

<input type="submit" value="実行" onclick="submitbtn();">

「OK」と「キャンセル」で別の処理を追加することが可能です。


Javascript:選択したラジオボタンのチェックを外す方法

ラジオボタン選択後にチェックしたものを外したい場合があります。
Javascriptを使用すればチェックしたラジオボタンをリセットすることが可能です。

Javascriptを使用し選択されているラジオボタンチェック外す方法をメモします。


選択したラジオボタンのチェックを外す

HTML

チェックを外すためのリンクを用意し、クリックした際にJavascriptを呼び出します。

<a href="javascript:void(0);" onclick="resetradio()">リセット</a>

ラジオボタンのidを連番で指定します。

<label for="radio1"><input type="radio" name="hoge" id="radio1" value="1" />ラジオボタン1</label>
<label for="radio2"><input type="radio" name="hoge" id="radio2" value="2" />ラジオボタン2</label>
<label for="radio3"><input type="radio" name="hoge" id="radio3" value="3" />ラジオボタン3</label>
<label for="radio4"><input type="radio" name="hoge" id="radio4" value="4" />ラジオボタン4</label>
<label for="radio5"><input type="radio" name="hoge" id="radio5" value="5" />ラジオボタン5</label>

javascript

呼び出されたらラジオボタンの数だけfor文でループさせ、ラジオボタンのチェックを外しています。

<script type="text/javascript">
function resetradio() {
    for (i = 1; i <= 5; i++) {
        document.getElementById('radio' + i).checked = false;
    }
}
</script>

Javascript:Javascriptで現在の日付を取得する

Javascript現在日付を取得する場合は、Dateオブジェクトを使用します。
日付や時間の取得はよく使うので、メモします。


Dateオブジェクト

現在の日時または指定した日時の日付オブジェクトを生成します。

now = new Date();

現在の日付を取得する

下記のように、生成したDateオブジェクトから
一つ一つの値を取得していきます。

	// Dateオブジェクトを生成
	now = new Date();

	// 年を取得
	//y = now.getYear();
	y = now.getFullYear();

	// 月を取得
	m = now.getMonth() + 1;

	// 日を取得
	d = now.getDate();

	// 時を取得
	h = now.getHours();

	// 分を取得
	i = now.getMinutes();

	// 秒を取得
	s = now.getSeconds();

	alert(y + '年' + m + '月' + d + '日 ' + h + '時' + i + '分' + s + '秒');

年の取得はgetYear()かgetFullYear()を使用します。
getYear()で取得した場合は、ブラウザやバージョンによって
2013を取得する場合と113を取得する場合に分かれるそうです。
なので3桁で取得した場合は1900をプラスして使用する必要があります。

	// 年を取得
	y = now.getYear();

	if ( y < 1900 ) {
		y = y + 1900;
	}

今であればgetFullYear()を使用したほうがいいと思います。
昔は使えなかったみたいですが。


月の取得は0~11の値が取得されるので、
下記のように1プラスしています。

	// 月を取得
	m = now.getMonth() + 1;

Javascript:javascriptで配列の中身をランダムに並び替える

Javascript配列の中身をランダム並び替える方法をメモします。

sort()メソッドを使用することで配列の順番を並び替えることができます。
引数がない場合はアルファベット順でソートされます。

今回はsort()メソッドに無名関数を指定し、random()メソッドで生成した値に
‘0.5’を引いた値で配列の順番をソートしています。


img.sort(
	function() {
		return Math.random() - 0.5;
	}
);

正の値、負の値、0で比較し配列を並び替えます。

下記は画像をランダムに並べ替えて表示した際の方法です。


複数の画像をランダム表示

javascript,jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        // 配列を設定
        var img = new Array("img1.jpg", "img2.jpg", "img3.jpg");

        // 配列の中身をランダムに並び替える
        img.sort(
            function() {
                return Math.random() - 0.5;
            }
        );

        // 配列をループさせ、imgタグを出力
        for(i = 0; i < img.length; i++) {
            $("div#hoge").append('<img src="img/' + img[i] + '" />');
        }

    });
</script>

HTML

<div id="hoge"></div>