Javascriptで宅急便各社の荷物追跡サービスの検索結果を表示するフォームを作る

  • 投稿
  • 編集

Javascriptで宅急便各社の荷物追跡サービスの検索結果を表示するフォームを作ってみた

  1. 検索窓に伝票番号(お問い合せ番号)を入力
  2. 宅急便会社を選択
  3. ボタンを押す
  4. 新規ウィンドウに検索結果が表示される

というフォームをJavascriptを使用して作ってみた。

 

よく使うのは

  • クロネコヤマト
  • 佐川急便
  • エクスパック

なので、この3つを検索できるようにしてみました。

nimotsu.html(http://hoshiya.biz/nimotsu_search/nimotsu.html

<!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で荷物追跡サービスの検索フォームを作ってみる。
http://hoshiya.biz/2009/09/php-1.html