Javascriptで宅急便各社の荷物追跡サービスの検索結果を表示するフォームを作る
目次
宅配便各社の荷物追跡結果を表示するフォームを作る
Javascriptで宅急便各社の荷物追跡サービスの検索結果を表示するフォームを作ってみました。
- 検索窓に伝票番号（お問い合せ番号）を入力
- 宅急便会社を選択
- ボタンを押す
- 新規ウィンドウに検索結果が表示される
よく荷物検索に使う以下の各社なので、この宅配便の検索をメインに作ります。
- クロネコヤマト
- 佐川急便
- エクスパック
フォームのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>荷物追跡</title>
</head>
<body>
<script type="text/javascript">
<!-- function data_in(){ //フォームデータ入力用変数
var denpyou;
var kaisha;
var url;
url = new Array();
//クロネコヤマト
url[1] = "http://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id=";
//佐川急便
url[2] = "http://k2k.sagawa-exp.co.jp/p/web/okurijosearch.do?okurijoNo=";
//日本郵便（ゆうパック・EXPACK・ポスパケット）
url[3] = "http://tracking.post.japanpost.jp/service/singleSearch.do?org.apache.struts.taglib.html.TOKEN=&searchKind=S002&locale=ja&SVID=&reqCodeNo1=";
//フォームデータを受け取る
if(document.form1.denpyou.value==""){
alert("伝票番号が入力されていません。");
}
else{
denpyou=document.form1.denpyou.value;
//ラジオボタンの値を受け取る
for (i=0;i<document.form1.kaisha.length;i++){
if (document.form1.kaisha[i].checked)
kaisha = document.form1.kaisha[i].value;
}
url = url[kaisha];
//新しいウィンドウで検索結果を表示
window.open(url+denpyou);
} }
/* 半角数字チェック */
function TextCheck() {
var str = document.form1.denpyou.value;
if( str.match( /[^0-9.-]+/ ) ) {
alert("半角数字、半角ハイフンで入力して下さい。");
return 1;
}
return 0;
} --> </script>
<form id="form1" name="form1" method="post" action="">
<br />
<label for="denpyou">伝票番号
<input name="denpyou" type="text" id="denpyou" value="" onblur="TextCheck();" />
</label>
（半角数字、半角ハイフン） <br />
<label for="kaisha">会社選択
<input name="kaisha" type="radio" id="kaisha" value="1" checked />
ヤマト運輸
<input name="kaisha" type="radio" id="kaisha" value="2" />
佐川急便
<input name="kaisha" type="radio" id="kaisha" value="3" />
ゆうパック･EXPACK</label>
<br />
<input name="button" type="button" id="button" value="検索結果ページを開く" onClick="data_in();" />
</form>
</body>
</html>
このページに埋め込んでテスト
実際に使用できます。
PHP版も作りました
PHP版は以下をご参照ください。