MW WP Formに郵便番号による住所入力補完をつけるには

  • 解決済 crysta

    (@crysta)


    11年、 3ヶ月前

    確認画面と送信完了画面が設置でき、フォーム部分のHTMLが自由に記述できるのが大きな魅力で、『MW WP Form』を利用させていただいています。
    現在担当しているお客様で、フォームメールを流用して注文フォームを設置したいという案件があり、『MW WP Form』で基本的な部分はすべて設定できたのですが、掲題の『郵便番号による住所入力補完をつける』ところでつまづいています。
    入力補完機能には『ajaxzip3』で郵便番号コードを引っ張ってきて連携させようと思っています。

    header.phpのwp_headの前に

    <script src=”http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js&#8221; charset=”UTF-8″></script>

    で『ajaxzip3』を呼び出しています。
    『MW WP Form』側は、郵便番号入力に『テキストフィールド』を2つ設定し（3桁-4桁入力用に）、『ajaxzip3』で2ボックス入力用の規定のname設定とonKeyUpの記述をしています。

    ～
    <tr>
    <th>ご住所</th>
    <td><label>〒[mwform_text name=”zip21″ size=”4″ value=”” maxlength=”3″]</label>-[mwform_text name=”zip22″ size=”4″ value=”” maxlength=”4″ onKeyUp=”AjaxZip3.zip2addr(‘zip21′,’zip22′,’pref21′,’addr21′,’strt21’);”]
    <label>都道府県[mwform_text name=”pref21″]</label>
    <label>市区町村[mwform_text name=”addr21″]</label>
    <label>以下住所[mwform_text name=”strt21″]</label></td>
    </tr>
    ～

    HTMLソース上では『ajaxzip3』が動作して入力補完できる記述になっているのですが、この設定では動作しないようです。

    なんとか住所入力補完を実装したいので、なにとぞアドバイスをお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • Takashi Kitajima

    (@inc2734)

    11年、 3ヶ月前

    ショートタグである[mwform_text]の中にonKeyUpを埋め込むことはできません。
    jQueryを使ってkeyup時の処理を設定するのが簡単かと思います。

    <script type="text/javascript">
jQuery( function( $ ) {
    $( 'input[name="zip22"]' ).keyup( function( e ) {
        AjaxZip3.zip2addr( 'zip21', 'zip22', 'pref21', 'addr21', 'strt21' );
    } )
} );
</script>
    トピック投稿者 crysta

    (@crysta)

    11年、 3ヶ月前

    inc2734様（プラグイン作者様ですね？）
    ご回答をありがとうございます！お礼の返信が遅くなって申し訳ありません。

    なるほど…HTMLソース上は一見埋め込めているように見えても、
    ショートタグ内にむりやり埋め込んだ記述は、正常に動作しなくて当然ですね。
    ご教授、ありがとうございました！

    ta_terunuma

    (@ta_terunuma)

    10年、 2ヶ月前

    解決済みですが、他方法の紹介です。
    (1)MW WP Form定義のひと工夫、id=”xxx”を追加します。
    　[mwform_text name=”zip21″ size=”4″ value=”” maxlength=”3″ id=”zip”]
    　[mwform_text name=”zip22″ size=”4″ value=”” maxlength=”4″ id=”zip1″]
    　[mwform_text name=”pref21″ id=”pref”]
    　[mwform_text name=”addr21″ id=”addr”]
    (2)Wordpresプラグイン「zipaddr-jp」の追加
    これだけで動きます。
    詳細は、http://zipaddr2.com/wordpress/ を参照下さい。
    ※ajaxzip3と違って、郵便番号が複数の地域に対応しているものでも正しく操作できます。
    （郵便番号欄に438-0078と入力して 静岡県磐田市「旭ケ丘」や磐田市までが表示されるのは、おかしいと思います。）

    トピック投稿者 crysta

    (@crysta)

    10年、 1ヶ月前

    ta_terunumaさん
    ご紹介をありがとうございます！返信が遅くなりまして、ごめんなさい…

    > （郵便番号欄に438-0078と入力して 静岡県磐田市「旭ケ丘」や磐田市までが表示されるのは、おかしいと思います。）

    「正しい住所が表示されない」とお客様からご指摘があり、まさにどんぴしゃりの現象…
    質問を見返したところでたいへん助かりました！！
    さっそくajaxzip3からプラグインに切り替え、正常動作するようになりました。

    ありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「MW WP Formに郵便番号による住所入力補完をつけるには」には新たに返信することはできません。

タグ