- ベストアンサー
テキストエリアに入力したURLにアクセス
タイトルのとおりなのですが、formタグ内のtextとbuttonを使った遷移をしたいのですがどうすればいいでしょうか。 例えば以下のサイトを考えます。 http://aaa.com そしてテキストフィールドにabcと入力するとhttp://aaa.com/abcに遷移 また、テキストフィールドにqweと入力するとhttp://aaa.com/qweに遷移 こういった遷移は可能なのでしょうか？ formのactionに指定してあげたいのですが、うまく想像ができません。 http://aaa.com/?word=abcのようなページではなく http://aaa.com/abc のように遷移したいのです。 JavaScriptを使うと思い調べているのですが、よいページが見つかりません。 どなたかご教授ください。。
- jonclock
- お礼率10% (26/239)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No1様の回答と同じですが <html> <head> <script type="text/javascript"> function hoge(e) { location.href = 'http://aaa.com/' + e.elements['test'].value; } </script> </head> <body> <form action="" method="" name="form1"> <input type="text" name="test" /> <input type="button" value="Jump" onclick="hoge(this.form)" /> </form> </body> </html> 入力値のチェックなどはしていません。 適宜、追加する必要があると思います。
その他の回答 (3)
- mizutaki
- ベストアンサー率33% (111/333)
若干勘違いが混ざってました。locationよりもsubmitの方が優先度が高いみたい。 お作りになったhoge();の一番最後の処理にreturn false;を付ければOKですよ。
- mizutaki
- ベストアンサー率33% (111/333)
イメージとしては <form onSubmit='return hoge();'> <input type="text" name="test" /> <input type="submit" value='vew'/> </form> onClickではなくてonSubmitを利用する事により、Submit処理をするような時にアクションをさせる事が出来ます。 ちなみにonSubmitの中でreturn false;となった場合には、submit処理をしないので、 Enterを押したけど、フォームの中身が悪いので処理をしない、という場合には、falseを返して、onSubmitの中がreturn false;になるようにするといいですよ。
お礼
mizutakiさん、返信ありがとうございます。 やってみたのですが、ただのPOSTメソッドになってしまい、?test=***となってしまします。なぜでしょうか。。 <html> <head> <script type="text/javascript"> function hoge(e) { //alert("hoge"); alert(document.getElementById("tt").value); //test location.href = "http://aaa.com/" + document.getElementById("tt").value; } </script> </head> <body> <form onSubmit="return hoge(this.form);"> <input type="text" id="tt" name="test"/> <input type="submit" value="vew"/> </form> </body> </html>
- mizutaki
- ベストアンサー率33% (111/333)
デフォルト値として var url = 'http://aaa.com/'; をデフォルトとしてスタンバイしておいて、 ボタンを押した所でonClickでイベントを実行し filename = document.getElementById('form_no_id').value; みたいなものでフォームの中身を取得 window.location.href = url + filename; みたいにしてジャンプ先を指定して、ページを移動させる。 そんな感じでしょうか？
お礼
回答ありがとうございます！ JavaScriptでやると色々やり方があって勉強になりますね。！ 加えてテキストエリアでEnterキーを押しても同じ挙動を示すにはどうすればいいでしょうか。 今ですと?name=***といった形で出力されてしまいます。 どうでしょうか。Enterキー無効にする、わけではなく同じ挙動をしてほしいのです。。 どうぞ宜しくお願いいたします。
お礼
さっそくの回答ありがとうございます。 ボタンによる遷移はまさに希望どおりの挙動でした！ 加えてテキストエリアでEnterキーを押しても同じ挙動を示すにはどうすればいいでしょうか。 今ですと?name=***といった形で出力されます。 Enterキーを無効にするやり方は分かるのですが、無効にしてしまうと少し使い勝手が悪化するような気がします。。 どうぞ宜しくお願いいたします。