Wicket の Ajax ビヘビアに慣れてしまうと、JavaScript を書くのが億劫になってくる。
こんな簡単な、郵便番号で住所検索するものでも。。。
HTML こんなのがあったとする。
<form name="form" ..>
<input type="text" name="zip1" ..>
<input type="text" name="zip2" ..>
<select name="state" ..>
<input type="text" name="city" ..>
</form>
ボタンをなどを用意してクリックで以下のJavaScript を実行する
郵便番号渡して都道府県名、市町村番地を返してくれるように
用意したサイトに送信する
<script type="text/javascript">
function zipSearch(){
var xmlHttp=null;
try{
// Firefox, Internet Explorer 7. Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}catch(e){
// Internet Explorer 6.
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return false;
}
}
}
xmlHttp.open("POST","URLを指定!", true);
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4){
resText = xmlHttp.responseText;
if (resText.length > 0){
// 返された文字列が、都道府県名+":"+市区町村番地 だとする。
ary = resText.split(":");
document.form.state.value = ary[0];
document.form.city.value = ary[1];
}
xmlHttp=null;
}
};
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("zip1="+document.form.zip1.value+"&zip2="+document.form.zip2.value);
}
</script>