web creating

POROA

【jQuery】郵便番号を入力するとAjaxとPHPで県情報を表示

よく、入力フォーム等である、「郵便番号」を入れると自動的に「県」と「市町村」が入力される機能をAjaxとPHPで作成しました。
データは郵便局のCSVデータを使用しています。
郵便番号データダウンロード

以下のコードはCSVをそのまま使用していますが、データベースに格納して使用するともう少し動作が早くなると思います。

【デモ】
郵便番号
住所
市区町村

【HTML】
<div id="admbox">

<form>
<dl>
<dt>郵便番号</dt>
<dd><input type="text" name="adcode" value="" placeholder="例)9876543" maxlength="8"></dd>
</dl>
<div class="errmg_box"></div><!-- errmg_box -->
<dl>
<dt>住所</dt>
<dd>
<select name="adselect">
    <option value="">お選びください</option>
    <option value="01">北海道</option>
    <option value="02">青森県</option>
    <option value="03">岩手県</option>
    <option value="04">宮城県</option>
    <option value="05">秋田県</option>
    <option value="06">山形県</option>
    <option value="07">福島県</option>
    <option value="08">茨城県</option>
    <option value="09">栃木県</option>
    <option value="10">群馬県</option>
    <option value="11">埼玉県</option>
    <option value="12">千葉県</option>
    <option value="13">東京都</option>
    <option value="14">神奈川県</option>
    <option value="15">新潟県</option>
    <option value="16">富山県</option>
    <option value="17">石川県</option>
    <option value="18">福井県</option>
    <option value="19">山梨県</option>
    <option value="20">長野県</option>
    <option value="21">岐阜県</option>
    <option value="22">静岡県</option>
    <option value="23">愛知県</option>
    <option value="24">三重県</option>
    <option value="25">滋賀県</option>
    <option value="26">京都府</option>
    <option value="27">大阪府</option>
    <option value="28">兵庫県</option>
    <option value="29">奈良県</option>
    <option value="30">和歌山県</option>
    <option value="31">鳥取県</option>
    <option value="32">島根県</option>
    <option value="33">岡山県</option>
    <option value="34">広島県</option>
    <option value="35">山口県</option>
    <option value="36">徳島県</option>
    <option value="37">香川県</option>
    <option value="38">愛媛県</option>
    <option value="39">高知県</option>
    <option value="40">福岡県</option>
    <option value="41">佐賀県</option>
    <option value="42">長崎県</option>
    <option value="43">熊本県</option>
    <option value="44">大分県</option>
    <option value="45">宮崎県</option>
    <option value="46">鹿児島県</option>
    <option value="47">沖縄県</option>
</select>
</dd>
</dl>

<dl>
<dt>市区町村</dt>
<dd><input type="text" name="adtext" value="" placeholder="例)●●市××区●1-2-3"></dd>
</dl>

</form>

</div>

【CSS】
#admbox {
    border:1px solid #c0c0c0;
    padding:10px;
}

#loading {
    background-image:url(/img/loading.gif);
    width:20px;
    height:20px;
    background-size:20px;
}

#all_back {
    display:none;
    background-color:rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    transition:ease-out 0.5s;
    z-index:9980;
}

#address_popup_box {
    width: 50%;
    height: 500px;
    border: 1px solid #c0c0c0;
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -25%;
    background-color: #fff;
    padding: 30px;
    box-sizing: border-box;
    display:none;
    z-index:9999;
}

#adse_btn {
    width:85%;
    height:50px;
    line-height:50px;
    text-align:center;
    margin:0 auto;
    border:1px solid #c0c0c0;	
}

.adse_btn_on {
    cursor:pointer;
    background-color:#c0c0c0;
}

#pcsearch {
    cursor:pointer;
}

.errmg_box {
    color:#f00;
}

【jQuery】
$(function(){
	
    //郵便番号
    var zipcode ;
	
    //郵便番号検索ajax
    function postajax(){
        $('#admbox dl:nth-of-type(1)').append('<div id="loading"></div>');
        $.ajax({
            type:"POST",
            url:"cheack1.php",
            data: JSON.stringify(zipcode),
            crossDomain: false,
            dataType : "jsonp",
            scriptCharset: 'utf-8'
        }).done(function(data){
            if(data[0]==""){
                $('.errmg_box').text('見つかりませんでした。');
                $('input[name="adtext"]').val('');
                $("#loading").remove();
            }else{
                $('.errmg_box').text('');
                $('select[name="adselect"]').val(data[0]);
                $('input[name="adtext"]').val(data[2]+data[3]);
            }
        }).always(function(data){
            $("#loading").remove();
        });
    }
	
    //郵便番号チェック
    $("input[name='adcode']").blur(function(){
        zipcode = $('input[name="adcode"]').val() ;
        var zipcodecount = zipcode.length ;
        if(zipcodecount<6){
            $('.errmg_box').text('文字数が足りません。');
            $('#loading').remove();
            return;
        }
            postajax();
    });   
	
});

【cheack1.php】
$json = file_get_contents('php://input');
$data = json_decode($json, true);
$zipcode = !empty($data) ? $data : '';
$zipcode = mb_convert_kana($zipcode, 'a', 'utf-8');
$zipcode = preg_replace('/[\sー-]/', '', $zipcode);
 
$callback  = (string)filter_input(INPUT_GET, 'callback');
$callback  = htmlspecialchars(strip_tags($callback));
 
$param = array('','','','');

$file = 'post_all.csv';

if(file_exists($file)){
    $spl = new SplFileObject($file);
    while (!$spl->eof()) {
        $columns = $spl->fgetcsv();
        if(isset($columns[2]) && $columns[2] == $zipcode){
			$kencode = substr($columns[0],0,2);
			$ttext = str_replace('以下に掲載がない場合','',$columns[8]);
            $param = array($kencode,$columns[6], $columns[7],$ttext);
            break;
        }
    }
}

printf("{$callback}(%s)", json_encode($param));

簡単な流れを説明すると、郵便番号を入力するとAjaxでページ遷移せずに郵便番号のCSVをチェックしjQueryでプルダウンとセレクトボックスの内容を変更しています。

入力フォームはユーザビリティにも大事な部分です。なるべく、ストレスなく入力できるよう、いろいろな機能をつけると、離脱がすくなると思います。
著者:poroa | 投稿日:2018年09月19日 | カテゴリ:jQuery
  • ■同じカテゴリの記事
  • ■よく見られている記事
■最新記事
■カテゴリ一覧
CSS
Excel
Google Analytics
HTML
jQuery
PHP
SEO
WordPress
ホームページ作成
ホームページ作成講座
未分類
楽天
■アーカイブ
2018年9月
2016年12月
2016年11月
2016年10月
2016年9月
2016年8月
■ランキング