【jQuery】郵便番号を入力するとAjaxとPHPで県情報を表示
よく、入力フォーム等である、「郵便番号」を入れると自動的に「県」と「市町村」が入力される機能をAjaxとPHPで作成しました。
データは郵便局のCSVデータを使用しています。
郵便番号データダウンロード
以下のコードはCSVをそのまま使用していますが、データベースに格納して使用するともう少し動作が早くなると思います。
【デモ】
【HTML】
【CSS】
【jQuery】
【cheack1.php】
簡単な流れを説明すると、郵便番号を入力するとAjaxでページ遷移せずに郵便番号のCSVをチェックしjQueryでプルダウンとセレクトボックスの内容を変更しています。
入力フォームはユーザビリティにも大事な部分です。なるべく、ストレスなく入力できるよう、いろいろな機能をつけると、離脱がすくなると思います。
データは郵便局の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



