テキストエリアに入力したURLにアクセス

解決済

質問者：jonclock
質問日時：2009/06/04 22:39
回答数：4件

タイトルのとおりなのですが、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を使うと思い調べているのですが、よいページが見つかりません。
どなたかご教授ください。。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2009/06/05 11:14

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>

入力値のチェックなどはしていません。
適宜、追加する必要があると思います。

- 0
- 件

通報する

この回答へのお礼

さっそくの回答ありがとうございます。
ボタンによる遷移はまさに希望どおりの挙動でした！

加えてテキストエリアでEnterキーを押しても同じ挙動を示すにはどうすればいいでしょうか。
今ですと?name=***といった形で出力されます。

Enterキーを無効にするやり方は分かるのですが、無効にしてしまうと少し使い勝手が悪化するような気がします。。

どうぞ宜しくお願いいたします。

通報する

お礼日時：2009/06/05 21:15

No.4

回答者： mizutaki
回答日時：2009/06/06 11:49

若干勘違いが混ざってました。

locationよりもsubmitの方が優先度が高いみたい。

お作りになったhoge();の一番最後の処理にreturn false;を付ければOKですよ。

- 0
- 件

通報する

No.3

回答者： mizutaki
回答日時：2009/06/05 23:04

イメージとしては

<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;になるようにするといいですよ。

- 0
- 件

通報する

この回答へのお礼

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>

通報する

お礼日時：2009/06/05 23:41

No.1

回答者： mizutaki
回答日時：2009/06/04 23:00

デフォルト値として

var url = 'http://aaa.com/';
をデフォルトとしてスタンバイしておいて、

ボタンを押した所でonClickでイベントを実行し
filename = document.getElementById('form_no_id').value;
みたいなものでフォームの中身を取得

window.location.href = url + filename;
みたいにしてジャンプ先を指定して、ページを移動させる。
そんな感じでしょうか？

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！

JavaScriptでやると色々やり方があって勉強になりますね。！

加えてテキストエリアでEnterキーを押しても同じ挙動を示すにはどうすればいいでしょうか。
今ですと?name=***といった形で出力されてしまいます。

どうでしょうか。Enterキー無効にする、わけではなく同じ挙動をしてほしいのです。。

どうぞ宜しくお願いいたします。

通報する

お礼日時：2009/06/05 21:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！