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

宅配便各社の荷物追跡結果を表示するフォームを作る

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

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

よく荷物検索に使う以下の各社なので、この宅配便の検索をメインに作ります。

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

フォームのソース

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

このページに埋め込んでテスト

実際に使用できます。

//

伝票番号 (半角数字、半角ハイフン) 会社選択 ヤマト運輸 佐川急便 ゆうパック・EXPACK

 PHP版も作りました

 PHP版は以下をご参照ください。

Hugo で構築されています。
テーマ Stack は Jimmy によって設計されています。