Skip to content

Instantly share code, notes, and snippets.

@tyoshikawa1106

tyoshikawa1106/PostalCodeSearch.page

Created January 29, 2017 14:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tyoshikawa1106/c044bc60a1e921ba8d48ed5ca8269adf to your computer and use it in GitHub Desktop.
Save tyoshikawa1106/c044bc60a1e921ba8d48ed5ca8269adf to your computer and use it in GitHub Desktop.
Download ZIP
Visualforce × Postal Code Search
Raw
PostalCodeSearch.page
<apex:page showHeader="true" sidebar="true">
<apex:slds rendered="true" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<style>
.postal-code-input {
width: 200px !important;
}
</style>
<div class="slds">
<div class="slds-m-bottom--large">
<div >
<section class="slds-box slds-m-around--small">
<div>
<form id="form01">
<div>
<label>Postal code</label>
<div>
<input type="text" class="slds-input postal-code-input focus zip" name="zip01" placeholder="100-7012" />
</div>
<label>Street address</label>
<div>
<input type="text" class="slds-input focus address" name="address01" />
</div>
</div>
</form>
</div>
</section>
<section class="slds-box slds-m-around--small">
<div>
<form id="form02">
<div>
<label>Postal code</label>
<div class="zipWrap">
<input type="text" class="slds-input postal-code-input focus zip01 zip02_01" name="zip02_01" placeholder="530" />
-
<input type="text" class="slds-input postal-code-input focus zip02 zip02_01" name="zip02_02" placeholder="0001" />
</div>
<label>Street address</label>
<div>
<input type="text" class="slds-input focus address" name="address02" />
</div>
</div>
</form>
</div>
</section>
<section class="slds-box slds-m-around--small">
<div>
<form id="form03">
<div>
<label>Postal code</label>
<div class="zipWrap">
<input type="text" class="slds-input postal-code-input focus zip01 zip03_01" name="zip03_01" placeholder="451" />
-
<input type="text" class="slds-input postal-code-input focus zip01 zip03_01" name="zip03_02" placeholder="6040" />
</div>
<label>Prefectures</label>
<div>
<input type="text" class="slds-input focus address" name="address03_01" />
</div>
<label>City address</label>
<div>
<input type="text" class="slds-input focus address" name="address03_02" />
</div>
</div>
</form>
</div>
</section>
<section class="slds-box slds-m-around--small">
<div>
<form id="form04">
<div>
<label>Postal code</label>
<div class="zipWrap">
<input type="text" class="slds-input postal-code-input focus zip01 zip04_01" name="zip04_01" placeholder="649" />
-
<input type="text" class="slds-input postal-code-input focus zip01 zip04_01" name="zip04_02" placeholder="2211" />
</div>
<label>Prefectures</label>
<div>
<select name="address04_01" class="slds-select postal-code-input">
<option value="">-- Please select --</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</div>
<label>City address</label>
<div>
<input type="text" class="slds-input focus address" name="address04_02" />
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
<script>
$(function () {
//ajaxzip3の設定
$('body').on('keyup','#form01 .zip',function() {
AjaxZip3.zip2addr('zip01','','address01','address01');
});
$('body').on('keyup','#form02 .zip02_01',function() {
AjaxZip3.zip2addr('zip02_01','zip02_02','address02','address02');
});
$('body').on('keyup','#form03 .zip03_01',function() {
AjaxZip3.zip2addr('zip03_01','zip03_02','address03_01','address03_02');
});
$('body').on('keyup','#form04 .zip04_01',function() {
AjaxZip3.zip2addr('zip04_01','zip04_02','address04_01','address04_02');
});
});
</script>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment