次のような、フォーム中にテキストボックスと「送信」というリンクがあります。
<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を教えてください。
<!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>
<!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>
直さなくても、$('.qselect')の部分を以下のようにすれば対応できます。
$('.qselect[href*="search.php"]')
もしくは送信ボタンにidを付ければ確実。
<a id="send" としたら、
$('#send')と書き換える。
ユーザーによるテキストフィールドへの入力は全てキー入力であるとは限らない(コンテキストメニューから貼り付けなど)ので、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でいじるというのは駄目でしょうか。
なるほどです。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の変数の渡し方を今一理解していないので、よろしければ教えていただければ助かります。 よろしくお願いします。
直さなくても、$('.qselect')の部分を以下のようにすれば対応できます。
2012/02/26 11:46:53$('.qselect[href*="search.php"]')
もしくは送信ボタンにidを付ければ確実。
2012/02/26 11:48:50<a id="send" としたら、
$('#send')と書き換える。