• ベストアンサー
  • 困ってます

Javascriptで、フォームボタン押下(submit)せず、リンクURLを書き換える

  • 質問No.5212862
  • 閲覧数1663
  • ありがとう数3
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 85% (12/14)

 javascriptで、
 1.フォームのテキストボックスに入れられた値を取得し、
  例)テキストボックス入力 ; test
 2.元々記述されているリンクURLをユーザがクリックした時、
  例)元々のリンクURL ; <a href="www.google.co.jo?q= ~...
 3."1"のテキストボックス内に記述された値を取得して、"2"のURLを書き換え、
  例)テキストボックス内の文字をURLの一部に追記する ; <a href="www.google.co.jo?q=test  ~...
 4.書き換えられた後のURLにユーザを飛ばす、
 ・・・という事って出来るんでしょうか。
 上記動作内でユーザの動作は、
  テキストボックスに文字を入れる、という動作と、
  リンクをクリックする、という動作のみです。

 フォームのボタン押下後、というのであれば出来たんですが、上記の様な動作のコードが思い浮かびません・・・。PHPとかCGIではなく、Javascriptで何とか出来ないでしょうか。
 お知恵拝借、よろしくお願いします。

質問者が選んだベストアンサー

  • 回答No.3
  • ベストアンサー

ベストアンサー率 51% (3827/7415)

onkeyupで処理してみては?

<script>
function hoge(v){
var url="http://www.google.co.jp?q=";
document.getElementById("fuga").href=url+v;
}
</script>

<input type="text" onkeyup="hoge(this.value)">
<a href="http://www.google.co.jp?q=" id="fuga">とぶ</a>
補足コメント
task2easy

お礼率 85% (12/14)

 回答ありがとうございます。まさにこんな方法を探していました。

 が・・・すいません。知識不足のせいだと思うのですが、上記内容でテストした所、何故か、URLの先頭にローカルホストのアドレスとテスト作成したJavascript入りのhtml名が入ってしまいます・・・?。
 > 書き換わった後のリンクの値 : http://127.0.0.1/test.htm?http://www.google.co.jp?q=テキストボックスの値)
 テスト環境はxampp1.6.8(apache2.2)なのですが、何か環境のせいなのでしょうか。何かヒントを頂けると嬉しいです。よろしくお願いします。
投稿日時:2009/08/18 02:14
お礼コメント
task2easy

お礼率 85% (12/14)

すいません。自己解決したました。
書いて頂いたスクリプトを、テキストエディタに貼り付けた所、何故か

var url="~のダブルコーテーションの次の文字に、半角?が入ってしまっていました。

これで解決です。お騒がせしました。
投稿日時:2009/08/19 01:17

その他の回答 (全2件)

  • 回答No.2

ベストアンサー率 44% (1016/2281)

<a onclick="">で、this.hrefを書き換えればいいんじゃないでしょうか。
お礼コメント
task2easy

お礼率 85% (12/14)

ありがとうございます。
ただ・・・onclickだとClickしないといけなそうなので今回のケースでは残念ですが使えなさそうです。

コメント有難うございました。
投稿日時:2009/08/18 02:00
  • 回答No.1

ベストアンサー率 43% (25/57)

<A>タグのリンク先をURLではなく、Javascriptの関数にしてはだめなのでしょうか。それであれば、ボタンを押したのと同様のやり方で、対応できると思いますが。
補足コメント
task2easy

お礼率 85% (12/14)

早速のご返事、ありがとうございます。
> Javascriptの関数にしては
 この方法ですと、そもそものURLを右クリックして、別Windowまたは別タブで開きたい人の動作を考えると、最後の手段にしたいです。右クリックした時や、プロパティを見ると、"javascript:void(x);"とかになりませんか?
 やっぱりダメっぽいですかねぇ・・・。
投稿日時:2009/08/17 00:38
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

ピックアップ

ページ先頭へ