https://qwerty.work/tags/javascript-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0-%E6%A4%9C%E7%B4%A2-%E3%82%AF%E3%83%AD%E3%83%8D%E3%82%B3%E3%83%A4%E3%83%9E%E3%83%88-%E4%BD%90%E5%B7%9D%E6%80%A5%E4%BE%BF-%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%91%E3%83%83%E3%82%AF/ Recent content in Javascript フォーム 検索 クロネコヤマト 佐川急便 エクスパック on qwerty.work Hugo -- gohugo.io ja-JP Thu, 17 Sep 2009 17:12:57 +0900 https://qwerty.work/post/2009/09/javascript_3/ Thu, 17 Sep 2009 17:12:57 +0900 https://qwerty.work/post/2009/09/javascript_3/ <h3 id="宅配便各社の荷物追跡結果を表示するフォームを作る">宅配便各社の荷物追跡結果を表示するフォームを作る </h3><p>Javascriptで宅急便各社の荷物追跡サービスの検索結果を表示するフォームを作ってみました。</p> <ul> <li>検索窓に伝票番号（お問い合せ番号）を入力</li> <li>宅急便会社を選択</li> <li>ボタンを押す</li> <li>新規ウィンドウに検索結果が表示される</li> </ul> <p>よく荷物検索に使う以下の各社なので、この宅配便の検索をメインに作ります。</p> <ul> <li>クロネコヤマト</li> <li>佐川急便</li> <li>エクスパック</li> </ul> <h3 id="フォームのソース">フォームのソース </h3><ul> <li>サンプルページ：<a class="link" href="http://qwerty.work/nimotsu_search/nimotsu.html" target="_blank" rel="noopener" >http://qwerty.work/nimotsu_search/nimotsu.html</a></li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;!</span><span style="color:#a6e22e">DOCTYPE</span> <span style="color:#a6e22e">html</span> <span style="color:#a6e22e">PUBLIC</span> <span style="color:#e6db74">&#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34;</span> <span style="color:#e6db74">&#34;&lt;a href=&#34;</span><span style="color:#a6e22e">http</span><span style="color:#f92672">:</span><span style="color:#75715e">//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&gt;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&lt;/a&gt;&#34;&gt;&lt;br /&gt;&lt;html xmlns=&#34;&lt;a href=&#34;http://www.w3.org/1999/xhtml&#34;&gt;http://www.w3.org/1999/xhtml&lt;/a&gt;&#34;&gt;&lt;br /&gt;&lt;head&gt;&lt;br /&gt;&lt;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&gt;&lt;br /&gt;&lt;title&gt;荷物追跡&lt;/title&gt;&lt;br /&gt;&lt;/head&gt;&lt;br /&gt;&lt;body&gt;&lt;br /&gt;&lt;script type=&#34;text/javascript&#34;&gt;&lt;br /&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">data_in</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#75715e">//フォームデータ入力用変数&lt;br /&gt; var denpyou;&lt;br /&gt; var kaisha;&lt;br /&gt; var url;&lt;br /&gt; url = new Array();&lt;br /&gt; //クロネコヤマト&lt;br /&gt; url[1] = &#34;&lt;a href=&#34;http://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id&#34;&gt;http://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id&lt;/a&gt;=&#34;;&lt;br /&gt; //佐川急便&lt;br /&gt; url[2] = &#34;&lt;a href=&#34;http://k2k.sagawa-exp.co.jp/p/web/okurijosearch.do?okurijoNo&#34;&gt;http://k2k.sagawa-exp.co.jp/p/web/okurijosearch.do?okurijoNo&lt;/a&gt;=&#34;;&lt;br /&gt; //日本郵便（ゆうパック・EXPACK・ポスパケット）&lt;br /&gt; url[3] = &#34;&lt;a href=&#34;http://tracking.post.japanpost.jp/service/singleSearch.do?org.apache.struts.taglib.html.TOKEN=&amp;searchKind=S002&amp;locale=ja&amp;SVID=&amp;reqCodeNo1&#34;&gt;http://tracking.post.japanpost.jp/service/singleSearch.do?org.apache.struts.taglib.html.TOKEN=&amp;searchKind=S002&amp;locale=ja&amp;SVID=&amp;reqCodeNo1&lt;/a&gt;=&#34;; </span></span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#75715e">//フォームデータを受け取る&lt;br /&gt; if(document.form1.denpyou.value==&#34;&#34;){&lt;br /&gt; alert(&#34;伝票番号が入力されていません。&#34;);&lt;br /&gt; }&lt;br /&gt; else{&lt;br /&gt; denpyou=document.form1.denpyou.value; &lt;br /&gt; &lt;br /&gt; //ラジオボタンの値を受け取る &lt;br /&gt; for (i=0;i&lt;document.form1.kaisha.length;i++){&lt;br /&gt; if (document.form1.kaisha[i].checked)&lt;br /&gt; kaisha = document.form1.kaisha[i].value;&lt;br /&gt; }&lt;br /&gt; &lt;br /&gt; url = url[kaisha];&lt;br /&gt; &lt;br /&gt; //新しいウィンドウで検索結果を表示&lt;br /&gt; window.open(url+denpyou);&lt;br /&gt; } </span></span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#75715e">/* 半角数字チェック */</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">TextCheck</span>() {<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">str</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">denpyou</span>.<span style="color:#a6e22e">value</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#66d9ef">if</span>( <span style="color:#a6e22e">str</span>.<span style="color:#a6e22e">match</span>( <span style="color:#e6db74">/[^0-9.-]+/</span> ) ) {<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">alert</span>(<span style="color:#e6db74">&#34;半角数字、半角ハイフンで入力して下さい。&#34;</span>);<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#66d9ef">return</span> <span style="color:#ae81ff">1</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> }<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#66d9ef">return</span> <span style="color:#ae81ff">0</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/script&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">form</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;form1&#34;</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;form1&#34;</span> <span style="color:#a6e22e">method</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;post&#34;</span> <span style="color:#a6e22e">action</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">label</span> <span style="color:#66d9ef">for</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;denpyou&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">伝票番号</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;denpyou&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;denpyou&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">onblur</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;TextCheck();&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#e6db74">/label&gt;&lt;br /</span><span style="color:#f92672">&gt;</span> <span style="color:#960050;background-color:#1e0010">（</span><span style="color:#a6e22e">半角数字</span><span style="color:#960050;background-color:#1e0010">、</span><span style="color:#a6e22e">半角ハイフン</span><span style="color:#960050;background-color:#1e0010">）</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">label</span> <span style="color:#66d9ef">for</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">会社選択</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;radio&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;1&#34;</span> <span style="color:#a6e22e">checked</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">ヤマト運輸</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;radio&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;2&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">佐川急便</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;radio&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;3&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">ゆうパック</span><span style="color:#960050;background-color:#1e0010">･</span><span style="color:#a6e22e">EXPACK</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/label&gt;&lt;br /</span><span style="color:#f92672">&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;検索結果ページを開く&#34;</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;data_in();&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#e6db74">/form&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#e6db74">/body&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/html&gt;</span> </span></span></code></pre></div><h3 id="このページに埋め込んでテスト">このページに埋め込んでテスト </h3><p>実際に使用できます。</p> <p>//</p> <p>伝票番号 （半角数字、半角ハイフン） 会社選択 ヤマト運輸 佐川急便 ゆうパック･EXPACK</p> <h3 id="php版も作りました"> PHP版も作りました </h3><p> PHP版は以下をご参照ください。</p> <ul> <li><a class="link" href="http://qwerty.work/2009/09/php-1.html" target="_blank" rel="noopener" >PHPで宅配便各社の荷物追跡結果ページを表示するフォームを作ってみる。</a></li> </ul>