【yubinbango.js】一つのフォームに複数の住所入力欄がある場合躓きやすいポイント

yubinbango.js とても便利ですよね。

github.com

複数住所の場合も対応していてとても便利なのですが、

住所一つのパターンから複数に拡張しようとするとよく躓きます。なのでそのメモを。

• 一つの場合

<form action="hogehoge" method="POST" class="h-adr">
    <input type="hidden" class="p-country-name" value="Japan">
    <div>
        <label for="">住所</label>
        〒<input type="text" class="p-postal-code">-<input type="text" class="p-postal-code">
    </div>
    <div>
        <label for="">県名</label>
        <input type="text" class="p-region">
    </div>
    <!-- 中略 -->
</form>

• 複数の場合

<form action="hogehoge" method="POST" class="h-adr">
    <div class="h-adr">
        <input type="hidden" class="p-country-name" value="Japan">
        <div>
            <label for="">住所1</label>
            〒<input type="text" class="p-postal-code">-<input type="text" class="p-postal-code">
        </div>
        <div>
            <label for="">県名1</label>
            <input type="text" class="p-region">
        </div>
        <!-- 中略 -->
    </div>
    <div class="h-adr">
        <input type="hidden" class="p-country-name" value="Japan">
        <div>
            <label for="">住所2</label>
            〒<input type="text" class="p-postal-code">-<input type="text" class="p-postal-code">
        </div>
        <div>
            <label for="">県名2</label>
            <input type="text" class="p-region">
        </div>
        <!-- 中略 -->
    </div>
</form>

躓きやすいポイントは、

<input type="hidden" class="p-country-name" value="Japan">

これの位置です。当たり前なのですが、

<div class="h-adr">
<!-- 中略 -->
</div>

これの中ごとでないとダメなのですね。

以上。