inputで入力された文字列をURLパラメータに入れて送るJS

テキストエリアに入力された文字列をURLパラメータとして使えないでしょうか。

テキストエリアの横にリンクがありテキストエリアを入力して、リンクを押下すると
下記のようになるというのを実現したいです。

aaa.php?param="テキストエリアに入力された文字列"

宜しくお願いします。

行動規範の内容に同意します

回答4件

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

SAMURAI-HACK

総合スコア988

GIRLibra

2014/12/08 01:07

ありがとうございました。

行動規範の内容に同意します

ベストアンサー

リンククリック時にのみ実行するので動作は軽いはず。

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

Ryo

総合スコア507

退会済みユーザー

2014/12/04 23:04

paramを使わずにjsでやりとりする方法ってあるんですか?

Ryo

2014/12/06 01:30

たとえば、遷移先のURLが``` aaa.html?なんか文字列 ```になる場合 ```lang-＜javascript＞ var getparam = location.search; ``` と記述しておけば、``` ?　```以降の文字列　”なんか文字列” が取得できます。 ※ただし、get通信の場合のみ post（URLにパラメータが表示されない）をする場合は、いつもの通り送信側 ```lang-<html> <form method="post" target="./aaa.php"> <input type="text" name="hoge"> <input type="submit" value="送信"> </form> ``` 受信側 ```lang-<php> <?php $param = $_POST['hoge']; ?> ``` とするほうが楽。 …どうしてもpostの受信もjsでやりたい場合 ```　XMLHttpRequest　```、``` responseText ```、``` Ajax ```、``` 非同期 ```辺りがキーワードになります。この辺とかどうでしょうか [WebOS Goodies](http://webos-goodies.jp/archives/50548720.html)

GIRLibra

2014/12/08 01:07

ありがとうございました。

行動規範の内容に同意します

雑だけどこんなで

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>