ajaxzip3とjavascriptを使ってhtmlタグ（pタグ）に住所データを反映させたい

ajaxzip3を使って、下記の機能を実装しようとしているのですが、うまくいかずに困っています。
（https://github.com/ajaxzip3/ajaxzip3.github.io）

郵便番号を入力し、住所検索をクリックした時点で、inputのtype="hidden"に値を反映する
反映したと同時に、hiddenに入った値を取得して、<p>タグ内に反映したい。

試したこと
-- onchangeでhiddenの値が変わったらpタグに値を挿入。

html
1<head>
2	<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
3	<script>
4		function zip() {
5			AjaxZip3.zip2addr('zip01','zip02','address','address');
6		}
7		function insert() {
8			addressdata = document.example.address.value;
9			document.getElementById("address").innerHTML = addressdata;
10		}
11	</script>
12</head>
13
14<form name="example">
15	<input type="text" size="5" maxlength="3" name="zip01">
16	<input type="text" size="6" maxlength="4" name="zip02">
17	<button type="button" class="zipsearch" onclick="zip()">住所検索</button>
18	
19	<p id="address">ここに下のinput type="hidden"からデータを抜き取って住所を表示させる</p>
20	<input type="hidden" name="address" onchange="insert()"><!--ここに住所の値を入れる-->
21</form>

onchangeはjavascriptで値を制御した場合は動作しないようで、他の方法を探していますが、
なかなか見つからずに困っています。

もし他の方法があれば、アイデアいただきたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

successで　エラーは出るけど

<head>
    <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
    <script>
        function zip() {
            AjaxZip3.zip2addr('zip01','zip02','address','address');
            AjaxZip3.onSuccess = function() {
            	 addressdata = document.example.address.value;
            	 document.getElementById("address").innerHTML = addressdata;
            	};
        }
    </script>
</head>

<form name="example">
    <input type="text" size="5" maxlength="3" name="zip01">
    <input type="text" size="6" maxlength="4" name="zip02">
    <button type="button" class="zipsearch" onclick="zip()">住所検索</button>

    <p id="address">ここに下のinput type="hidden"からデータを抜き取って住所を表示させる</p>
    <input type="hidden" name="address" onchange="insert()"><!--ここに住所の値を入れる-->
</form>

投稿2018/08/10 03:08

arasi

総合スコア156

mayeno26

2018/08/10 04:05

おお！いけました！ ajaxzip3にonSuccessなるものがあるというのはちらっと見たのですが、こう使えばよかったのですね。。ありがとうございます！

mayeno26

2018/08/10 04:18 編集

ちなみに、 <input type="hidden" name="address" onchange="insert()">　の「onchange="insert()"」はいらなかったです。

行動規範の内容に同意します

whenでajaxzipを実行し、doneでhiddenの情報を取得してみては？

jQueryで、順番に実行が出来る .when() から .done() が便利だったのでメモ

追記：
色々調べてみたところ、hiddenフィールドは対応してないようですね。
pに表示する用途は不明ですが、ひとまずajaxzip受ける側はtextにしてください。

あと思いついた別案もあげておきます。
・setTimeoutでaddressを監視しておき前の情報と違った場合のみaddressから取得→pに設定
・zip01,zip02のonblurイベントで取得（取得できるときにはaddressフィールドにフォーカスがうつるため）

そういえばHTMLがzip21,zip22となってますが、これちゃんと郵便番号検索できます？

投稿2018/08/07 23:32

編集2018/08/08 00:41

m.ts10806

総合スコア80850

mayeno26

2018/08/08 01:19

ありがとうございます！ typeはtextにしてdisplay:noneにするということですかね。試してみます。＞そういえばHTMLがzip21,zip22となってますが、これちゃんと郵便番号検索できます？問題なく動いてます。

m.ts10806

2018/08/08 01:27

指定が'zip01','zip02'となっているので正しく探せないんじゃないかと思っていましたが、問題ないならいいです。

m.ts10806

2018/08/09 12:52

低評価つけている人たちへ。私の回答が解決に充分でないことは重々承知ですが、何もコメントしないなら充分な回答を書いてあげた方が質問者さんのためになります。よろしくお願いします。

mayeno26

2018/08/10 01:48

結局、when,doneでもうまくいかず悶々としていたところ、ajaxzipで出た住所が完全に正しいとも限らないから編集できるようにしたほうがいいのでは？、ということになり、普通にtype="text"に表示させることになりました。ご協力いただいたのに、解決に至らず、申し訳ございません。素早いご回答を頂きましたので、ベストアンサーとさせていただきます。また機会があれば挑みたいと思います。。

m.ts10806

2018/08/10 02:46

そうですね。編集不可としたいのでしたらdisabledかけるのもありですし、枠をなくしてラベルっぽく加工するのもありです。

mayeno26

2018/08/10 04:08

ありがとうございます。後からご回答いただいた方のコードが的確なものでしたので、誠に勝手ながらベストアンサーを付け替えさせて頂きます。よろしくお願いいたします。

m.ts10806

2018/08/10 04:14

解決できたようで何よりです

行動規範の内容に同意します

あなたの回答