Enter a Postal Code to Auto-fill Address【yubinbango.js】｜DAD UNION

This article introduces how to easily auto-fill an address just by entering a postal code using yubinbango.js.

Contents

CSS for Auto-filling Address by Entering Postal Code
Load yubinbango.js File to Easily Auto-fill Address by Entering Postal Code
HTML Markup for Auto-filling Address by Entering Postal Code
Demo Page: Auto-fill Address by Entering Postal Code
Source: YubinBango

CSS for Auto-filling Address by Entering Postal Code

*Please modify as needed.

<style type="text/css">
<!--
body{
  text-align: center;
  font-size: 16px;
}
h1{
  text-align: center;
  padding: 10px 0 0 0;
  font-size: 18px;
}
h2{
  text-align: center;
  padding: 20px 0 0 0;
  font-size: 16px;
}
-->
</style>

Load yubinbango.js File to Easily Auto-fill Address by Entering Postal Code

*Simply load the yubinbango.js file.

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

HTML Markup for Auto-filling Address by Entering Postal Code

*The following conditions must be met:

The form tag must include h-adr in its class attribute.
Within the form, p-country-name must specify “Japan”.
The postal code input field must include p-postal-code in its class attribute.
The address input fields must include p-region for prefecture, p-locality for city, p-street-address for street, and p-extended-address for extended address.

<h1>Auto-fill Address Just by Entering Postal Code</h1>

<h2>Enter the postal code without a hyphen to auto-fill the address</h2>
    <form class="h-adr">
      <span class="p-country-name" style="display:none;">Japan</span>

      〒<input type="text" class="p-postal-code" size="8" maxlength="8"><br>

      <input type="text" class="p-region p-locality p-street-address p-extended-address" /><br>
    </form>

<h2>Auto-fill Prefecture, City, and More by Entering Postal Code</h2>
    <form class="h-adr">
      <span class="p-country-name" style="display:none;">Japan</span>

      〒<input type="text" class="p-postal-code" size="3" maxlength="3">-
      <input type="text" class="p-postal-code" size="4" maxlength="4"><br>

      <input type="text" class="p-region" readonly /><br>
      <input type="text" class="p-locality" readonly /><br>
      <input type="text" class="p-street-address" /><br>
      <input type="text" class="p-extended-address" />
    </form>