フォーム入力補助


概要


フォーム入力の際の都道府県入力を補助するスクリプト各種を紹介公開しています。


jsmapとの連携
jsmap

jsmapは、県名や州名の選択をするためのポップアップを表示する入力補助スクリプトです。


jsmap を利用することで、視覚的に都道府県の選択を行うことができます。
さらに、初期値を都道府県判定値とすることで、アクセスユーザの手間を減らせ、
ユーザビリティを向上することができます。

設置手順
  1. jsmapをダウンロード(製作者様のサイトへ)
  2. どこどこJP用のJavaScriptファイルをダウンロード
  3. <head>~</head>間に、どこどこJPのAPIと先ほどダウンロードしたファイルを読み込ませます
    ※jsmapの設定は、こちらのサイトでご確認ください
                            <script type="text/javascript" src="http://api.docodoco.jp/v3/docodoco?key=APIキー" charset="utf-8"></script>
                            <script type="text/javascript" src="jsmap/map.js"></script>
                            <script type="text/javascript" src="docodoco_jsmap.js"></script>
                        
  4. jsmapを表示させたい場所にinputタグを記述し、必要な属性を加えます
    • name、id属性同じ内容を指定(下記では『sample』を指定)
    • autocomplete="off"固定値
    • class="jsmap"固定値
                            <input type="text" name="sample" id="sample" value="東京都" autocomplete="off" class="jsmap" />
                        
  5. 位置情報(都道府県)の書き換え用コードを<head>~</head>間に記述する
                            <script type="text/javascript">
                            <!--
                                jsMap("sample");    // 引数はinputタグのid名
                            //-->
                            </script>
                        

企業フラグを用いたフォーム入力補助

どこどこJPの属性を利用することで、アクセスユーザの入力作業を簡単に!
アクセスユーザが法人と判断(BCFlag)が出来た時に、以下の入力を自動で行います。
また、個人と判断された時には、『都道府県』と住所の『市区町村』の自動入力を行います。

  • 会社名
  • 会社郵便番号
  • 会社住所(都道府県)
  • 会社住所(市区町村以下)
  • 会社代表電話番号
会社名
郵便番号
都道府県
住所
電話番号
設置手順
  1. どこどこJP用のJavaScriptファイルをダウンロード
  2. <head>~</head>間に、どこどこJPのAPIと先ほどダウンロードしたファイルを読み込ませます
                            <script type="text/javascript" src="http://api.docodoco.jp/v3/docodoco?key=APIキー" charset="utf-8"></script>
                            <script type="text/javascript" src="docodoco_orgform.js"></script>
                        
  3. フォームを用意し、各部品にid属性を記述する
    ※都道府県選択はselectタグでの利用のみ
  4. 各フォーム部品の書き換え用コードを<head>~</head>間に記述する
    パラメータは必要な要素分だけ記述
                            <script type="text/javascript">
                            <!--
                                orgForm({
                                    orgname: "orgname",
                                    zipcode: "zip",
                                    prefecture: "pref",
                                    address: "address",
                                    phone: "tell"
                                });
                            //-->
                            </script>
                        
パラメータ
パラメータ名 説明
orgname 組織名を表示させる要素のid名
zipcode 郵便番号を表示させる要素のid名
prefecture 都道府県を表示させる要素のid名
selectタグでのみ有効
address 住所を表示させる要素のid名
phone 電話番号を表示させる要素のid名



Page Top