宅配便各社の荷物追跡結果を表示するフォームを作る
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版は以下をご参照ください。