質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

26425閲覧

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

GIRLibra

総合スコア33

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2グッド

3クリップ

投稿2014/12/04 10:45

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

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

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

宜しくお願いします。

kurocraft0312, hirory👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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>

処理の流れとしては

  1. テキストフォームを監視
  2. テキストが入力されたらテキストを取得してリンクに埋め込む

という風になっています。

投稿2014/12/04 12:02

SAMURAI-HACK

総合スコア988

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

GIRLibra

2014/12/08 01:07

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

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

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

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

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

hello-world

総合スコア1342

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

GIRLibra

2014/12/08 01:06

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

0

http://jsdo.it/katoy/7KXH にサンプルを作ってみました。
URL には jump せずに、alert で url を表示させています。

ここでは、次のような方法をとっています。
ボタンやリンクをクリックしたら、テキストエリアに入力された文字列を取得し、url encode して url を組み立てる。

投稿2014/12/04 13:25

katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

GIRLibra

2014/12/08 01:07

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問