テキストエリアに入力された文字列をURLパラメータとして使えないでしょうか。
テキストエリアの横にリンクがありテキストエリアを入力して、リンクを押下すると
下記のようになるというのを実現したいです。
aaa.php?param="テキストエリアに入力された文字列"
宜しくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
JavaScript
単体だと長くなってしまうのでjQuery
を使用したサンプルを書きます。
lang
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <!-- jQueryの読み込み --> 6 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 7</head> 8<body> 9 10<!-- テキストフォーム --> 11<input type="text" id="inputText" placeholder="パラメータを入力してください"> 12 13 14<!-- リンク --> 15<a href="#" id="link">リンク</a> 16 17 18<!-- ▼ jQueryによる処理 ▼ --> 19<script> 20$(function() { 21 22 // テキストフォームを監視して入力があるたびに実行 23 $('#inputText').on('input change', function() { 24 25 // テキストを取得 26 var param = $(this).val(); 27 28 // リンクを書き換え 29 $('#link').attr('href', '/aaa.php?param=' + param); 30 31 }); 32 33}); 34</script> 35<!-- ▲ jQueryによる処理 ▲ --> 36 37 38</body> 39</html>
処理の流れとしては
- テキストフォームを監視
- テキストが入力されたらテキストを取得してリンクに埋め込む
という風になっています。
投稿2014/12/04 12:02
総合スコア988
0
ベストアンサー
リンククリック時にのみ実行するので動作は軽いはず。
lang
1$(function(){ 2 $("#link").click(function(){ 3 var param = $("#hoge").val(); 4 if (param != ""){ 5 //文字が入ってる時だけ 6 param = escape(param); 7 //エスケープ処理 8 $(this).attr("href","./aaa.php?param=" + param); 9 // window.location.href=""./aaa.php?param=" + param"; 10 // でもOK 11 }else{ 12 //リンク無効 13 return false; 14 } 15 }); 16}); 17
lang
1<input type="text" id="hoge"><a href="#" id="link">リンク</a>
参考までに…
パラメータの受け取りもjsで行いたい場合は、遷移先で
lang
1 var param ="param=" 2 var getparam= location.search.substring(param.length,location.search.length); 3 // location.search で パラメタ文字列(aaa.php?○○○○ の ○○○○ 部分)を取得 4 // substringで "param=" より後ろの文字列を取得 5 getparam = unescape(getparam); 6 //エスケープを解除
とやってあげれば、?param=以下の値を取得できます。
まぁ、jsでやりとりするなら param= は必要ないんですけどね。
投稿2014/12/04 15:42
総合スコア507
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2014/12/06 01:30
2014/12/08 01:07
0
雑だけどこんなで
lang
1<!doctype html> 2<meta charset="utf-8"> 3<style> 4.plain { 5 border: none; 6 background-color: transparent; 7 color: blue; 8 text-decoration: underline; 9} 10</style> 11<form method="GET" action="aaa.php"> 12 入力:<input name="param"> 13 <button class="plain" type="submit">送信</button> 14</form>
投稿2014/12/04 11:50
総合スコア1342
0
http://jsdo.it/katoy/7KXH にサンプルを作ってみました。
URL には jump せずに、alert で url を表示させています。
ここでは、次のような方法をとっています。
ボタンやリンクをクリックしたら、テキストエリアに入力された文字列を取得し、url encode して url を組み立てる。
投稿2014/12/04 13:25
総合スコア22324
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2014/12/08 01:07