jqueryで動的にa要素を生成したい


次のような、フォーム中にテキストボックスと「送信」というリンクがあります。
<form>
<input type="text" id="input-up" />
<a class="qselect" class="button" href="./search.php?que=[任意の文字列]">送信</a>
</form>
このテキストボックスに入れた文字列に応じて、a要素のhrefをリアルに書き換えようと思います。
文字列を[任意の文字列]とすると、a hrefの値は上のような形になります。
つまりテキストに任意の文字列を入力した状態で、送信をクリックするとsearch.phpにクエリが送られます。

今回は、form actionを使ってパラメータを送るのではなく、あくまでもa要素のhrefを入力に応じて動的に書き換えることが目的です。
http://www9.plala.or.jp/oyoyon/html/script/append.html
http://web-park.org/javascript/form091016.html
このあたりのページを参考にしたところ、jqueryのkeyupを利用すれば動的な文字列の取得はできるようですが、取得した文字列に応じてhrefを書き換える方法というものがわかりません。

jqueryはheadで読み込んでいます。
このような書き換え動作を行うjavascriptを教えてください。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2012/03/02 15:07:58
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

ポイント80pt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script>
$(function() {
  $('#input-up').keyup(function() {
    $('.qselect').attr('href', './search.php?que=' + $(this).val());
  });
});
</script>
</head>
<body>
<form>
<input type="text" id="input-up" />
<a class="qselect" class="button" href="./search.php?que=">送信</a>
</form>
</body>
</html>
他3件のコメントを見る
id:Cherenkov

直さなくても、$('.qselect')の部分を以下のようにすれば対応できます。
$('.qselect[href*="search.php"]')

2012/02/26 11:46:53
id:Cherenkov

もしくは送信ボタンにidを付ければ確実。
<a id="send" としたら、
$('#send')と書き換える。

2012/02/26 11:48:50

その他の回答1件)

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493ここでベストアンサー

ポイント80pt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script>
$(function() {
  $('#input-up').keyup(function() {
    $('.qselect').attr('href', './search.php?que=' + $(this).val());
  });
});
</script>
</head>
<body>
<form>
<input type="text" id="input-up" />
<a class="qselect" class="button" href="./search.php?que=">送信</a>
</form>
</body>
</html>
他3件のコメントを見る
id:Cherenkov

直さなくても、$('.qselect')の部分を以下のようにすれば対応できます。
$('.qselect[href*="search.php"]')

2012/02/26 11:46:53
id:Cherenkov

もしくは送信ボタンにidを付ければ確実。
<a id="send" としたら、
$('#send')と書き換える。

2012/02/26 11:48:50
id:rikuba No.2

回答回数26ベストアンサー獲得回数12

ポイント20pt

ユーザーによるテキストフィールドへの入力は全てキー入力であるとは限らない(コンテキストメニューから貼り付けなど)ので、keyupイベントではなくchangeイベントを監視した方がよいと思います。

また、文字列をURIComponentとして埋め込むときはencodeURIComponentでエスケープしましょう(テキストフィールドに「&」や「#」を含む語を入力されたとき、クエリがおかしくなります)。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script>
$(function () {
  $('#input-up').change(function () {
    $this = $(this);
    $this.next('.qselect').attr('href', './search.php?que=' + encodeURIComponent($this.val()));
  });
});
</script>
</head>
<body>
<p>
  <input type="text" id="input-up">
  <a href="./search.php" class="qselect button">送信</a>
</p>
</body>
</html>

ところで、JSを使わず、submitボタンの見た目をCSSでいじるというのは駄目でしょうか。

id:holoholobird
なるほどです。keyupではなくchangeを使うという手もあったのですね。
ありがとうございます。

>JSを使わず、submitボタンの見た目をCSSでいじるというのは駄目でしょうか。
これは既に試したのですが、私の実力が足りなかったのかa要素以外では設定が難しかったです。

ところでもう一つ知りたいことができたのですが、テキストボックスが複数になった場合、
構成されるa要素にそれを連結させるにはどのようにすればいいのでしょうか。


  <input type="text" id="input-up1">
  <input type="text" id="input-up2">
  <input type="text" id="input-up3">
  <input type="text" id="input-up4">
  <a href="./search.php" class="qselect button">送信</a>

としたとき、
search.php?que1=[input-1に入力された任意の文字列]&que2=[input-2に入力された任意の文字列]&que3=[input-3に入力された任意の文字列]&que4=[input-4に入力された任意の文字列]
になるような形です。

まだjavascriptの変数の渡し方を今一理解していないので、よろしければ教えていただければ助かります。
よろしくお願いします。
2012/02/28 11:42:39

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません