いつまで経ってもわからない、WEBってやつは・・・(´・ω・`)

【WordPress】[追記あり]MW WP Formの郵便番号から住所自動入力にするメモ(´・ω・`)ノ

こんにちわ、アイコンフォント使おうとしてhtml5用の「2.1(beta4)/IE9.js」を読み込ませたらIE8とかで変な数字とかになって泣きそうになったゆでです(ΦωΦ)<@font-faceかああああ

WordPressのフォームプラグイン、『MW WP Form』をよく使わせて頂いてるのですが、郵便番号部分を自動にする『ajaxzip3』と組み合わせ、ついでに『jQuery Autotab』もいれて入力楽にしちゃおうぜ!っていうメモです(`・ω・´)+

MW WP Formを入れる

インストールして、有効化(´・ω・`)

HTML部分は、下記(都道府県はセレクトボックスではなく、テキストにする)


ご住所

[mwform_zip name="郵便番号"]

都道府県 [mwform_text name="都道府県"]

市区町村 [mwform_text name="市区町村"]

丁目番地 [mwform_text name="丁目番地"]

 ajaxzip3.jsを読み込ませる(HTTP)

%MINIFYHTML062b9f2d867ee3a5e524dc197b7d359211%

[追記:20104/9/8]
ajaxzip3.jsを読み込ませる(HTTPS)

%MINIFYHTML062b9f2d867ee3a5e524dc197b7d359212%

 autotab.jsをダウンロードして読み込ませる

%MINIFYHTML062b9f2d867ee3a5e524dc197b7d359213%

 わたしはめんどいので「js」フォルダに入れて下記(´・ω・`)

%MINIFYHTML062b9f2d867ee3a5e524dc197b7d359214%

 autotab有効化

jQuery('input[type=text]').autotab();

※追記:2014/9/30
上記 input[type=text] の部分は必ずクラスをつける形で、全input[type=text]にはautotabを反映させないように注意!
iphoneにて漢字変換ができない(ΦωΦ)ので、
例) .num input[type=”text”] もしくは  input[type=”text”].num などで特定する

 うん、でけたでけた(*´ω`*)

ajaxzip3有効化

フォーラムに質問があって、作者が答えてた(*´ω`*)!
MW WP Formに郵便番号による住所入力補完をつけるには

jQuery('input[name="〒下4桁"]' ).keyup( function( e ) {
   AjaxZip3.zip2addr( '〒上3桁', '〒下4桁', '都道府県', '市区町村', '丁目番地' );
});

 なるほどぉ・・で、郵便番号どっち変更してもできるように、あとkeyupだとautotabともにょもにょしたり・・なのでちょい変更して、、

jQuery( "input[name='郵便番号[data][0]'],input[name='郵便番号[data][1]']").on('change',function(e){ //zip
   AjaxZip3.zip2addr( '郵便番号[data][0]', '郵便番号[data][1]','都道府県', '市区町村', '丁目番地' );
});

 でけたー(*´ω`*)♪

まとめるとこうなる

※HTTPバージョン。HTTPSはajaxzip3.jsの読み込み先を変更してね!
HTML部分は上記で、読み込み+実行は

%MINIFYHTML062b9f2d867ee3a5e524dc197b7d359215%%MINIFYHTML062b9f2d867ee3a5e524dc197b7d359216%%MINIFYHTML062b9f2d867ee3a5e524dc197b7d359217%

 DEMO

ご住所

都道府県

市区町村

丁目番地

かんたーん(*´∀`*)♪