人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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を教えてください。

●質問者: holoholobird
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●80ポイント ベストアンサー
<!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>

Cherenkovさんのコメント
$(this).val() or this.value

holoholobirdさんのコメント
>|| ご回答ありがとうございます。 コードのhrefへの動作は理想的です。 問題点が3点ほどあります。 1:class="qselect"が使われているa要素は他にもある 2:class="button"が使われているのはこの「送信」だけ 3:class="qselect"は他のjavascriptの動作対象にもなっている 1,2のせいで、このままではa要素をクリックするとほかのリンクでも「送信」されてしまいます。 これを防ぐために ・スクリプトの.qselect部を.buttonに変更する ・a要素のqselectとbuttonの順序を変えて、<a class="button" class="qselect" href="./search.php?que=">送信</a> とすると、hrefの生成は機能しますが3に使われているjavascriptが動作しなくなってしまいます。 class="qselect"で使用されているjavascriptを使用しながら、 <a class="qselect" class="button" href="./search.php?que=">送信</a> にhrefの生成を適用することはできるでしょうか。 どうかよろしくお願いします。 ||<

Cherenkovさんのコメント
まず<a class="qselect button"に直すべきです。

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

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

2 ● rikuba
●20ポイント

ユーザーによるテキストフィールドへの入力は全てキー入力であるとは限らない(コンテキストメニューから貼り付けなど)ので、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でいじるというのは駄目でしょうか。


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の変数の渡し方を今一理解していないので、よろしければ教えていただければ助かります。 よろしくお願いします。 ||<
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ