- ベストアンサー
javaScriptを使用した入力文字の継承
- javaScriptを使用して既存のWebページに路線検索機能を追加する方法について教えてください。
- yahoo!路線検索にリンクさせた際に、入力した出発駅・目的地の内容が反映されない問題が発生しています。
- 初めてjavaScriptを使用するため、ソースコードに抜けがあるのか原因が分かりません。どなたかご教授いただけないでしょうか。
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
アクションの設定が「http://transit.yahoo.co.jp/」だと検索入力のページなので、ここへリンクするのであれば、わざわざ事前に一部の項目だけ入力させてからジャンプすることの意味がわかりません。(単純なリンクで良いのでは?) もしも、検索結果を表示させたいのであれば、リンク先は「http://transit.yahoo.co.jp/search/result」になるはずですが、出発地と目的地だけの情報でここへジャンプすると、航空機や新幹線は使わないという設定になるので、遠距離地を入力してみるとけっこう笑える結果になって実用的ではありません。 また、ANo2様のおっしゃるようにブラウザのエンコードではうまくいかないようなので、自分でURLエンコードしておく必要がありそうですね。 これにjavascriptを使うとして、こんな感じでしょうか? <html><head> <script language="JavaScript"><!-- function test(f){ a = "from=" + encodeURI(f.from.value) + "&to=" + encodeURI(f.to.value); elmnts = f.childNodes; for (e=0; e<=elmnts.length-1; e++) { if (elmnts[e].type == "checkbox") { elmnts[e].value = (elmnts[e].checked) ? 1:0; a = a + "&" + elmnts[e].name + "=" + elmnts[e].value; } } window.location.href="http://transit.yahoo.co.jp/search/result?" + a; return false; } //--></script> </head> <body> <form method="get" action="http://transit.yahoo.co.jp/"> 出発地<input type="text" name="from"> 目的地<input type="text" name="to"> <input type="button" value="路線検索" onclick="test(this.form);"> <br> <input type="checkbox" name="shin" value="1" checked>新幹線を使う <input type="checkbox" name="ex" value="1" checked >有料特急を使う <br> <input type="checkbox" name="hb" value="1" checked>高速バスを使う <input type="checkbox" name="al" value="1" checked>空路を使う </form> </body> </html> 適当に作ってみましたが、とりあえず動くみたいです。でも、他にもいろいろな付加情報がありますので、全容を把握した上で作成しないと、きちんと機能しない可能性があります。 というよりも、中途半端に利用するよりも単純にトップにリンクするだけしておいた方が、結果的には親切になると思いますけど・・・
その他の回答 (2)
- pick52
- ベストアンサー率35% (166/466)
ANo.1さんと同じですがJavaScript使っていませんよね? あと、HTMLでは属性と値そしてそれを繋ぐ=の間にスペース入れては いけません。 <form method="get" action="http://transit.yahoo.co.jp/"> 出発地<input type="text" name="from"> 目的地<input type="text" name="to"> <input type="submit" value="路線検索"> </form> それと、更にページのエンコードがUTF-8以外だと正常に渡せないと 思います。
お礼
ANo.3さんのおかげで解決致しました。ありがとうございました。
補足
ANo.1さんANo.2さんのご指摘通りJavaScriptを使っていませんね汗。 では、下記のような流れで書けばよいのでしょうか? 一応、路線サイトには飛びます。 <html> <head> <title>"路線検索機能"</title> <script language="JavaScript"> <!-- ※ここに入力文字を飛ばす処理内容を書く? //--> </script> </head> <body> <form method="get" action=" http://transit.yahoo.co.jp/"> 出発地<input type="text" name="from"> 目的地<input type="text" name="to"> <input type="submit" value="路線検索"> </form> </body> </html>
- yambejp
- ベストアンサー率51% (3827/7415)
javascriptを使っているようには見えませんが・・・ ちなみに <form>タグが<from>になっているのでこのままでは飛びません。 逆に、出発地のnameがfromになるはずがformとなっています。 これでは出発地ははいりません
お礼
ANo.3さんのおかげで解決致しました。ありがとうございました。
補足
すみません。<form>タグに関しては、私の記述ミスでした。出発地のnameはfromですね?修正して実行しても、入力文字はやはり飛んでませんでした。
お礼
ご丁寧にありがとうございました。今回は、(諸事情で)路線のみの検索にすることになりまして…。javascriptについてはまだまだ知識に乏しいのですが、今後も引き続き勉強していきたいと思います。