最も簡単にPHPの変数をjavascriptの引数にする方法

Question

前提・実現したいこと

PHPで下記のようなシステムを作っています。

・テキストボックスに検索する値を入力すると、一覧がDBからlike検索されて出てくる
・検索はselect文で行われ、一件ずつforeachで回して表示しています

そこで、javascriptを用いて、
aタグでリンクをクリックすればその値を別のテキストボックスに出力するようにしたいのですが、
phpの値を引数にするのは調べたところ一筋縄ではいかない様子です

試したこと

   
   <?php
if(isset($_POST['search'])){
	if($_POST['word']!=""){
		$sth = $pdo->prepare(" SELECT * from tracks where title like :word ");
		$sth->bindValue(':word', '%'.$_POST['word'].'%', PDO::PARAM_STR);

		$sth->execute();
		foreach($sth as $row) {
			echo '<a href="javascript:void(0);" onclick="OnLinkClick();"> '.$row['title'].'</a>';
			echo $row['title'];
			echo ' ';
			if($row['grv']!=0){
				echo $row['grv'];
			}
			echo '<BR>';
		}
		 
	 }  
}
 ?>
 

<form name="music">
<input type="text" name="txtbox" value="">
<?php

$value="aaaa";
echo '<a href="javascript:void(0);" onclick="OnLinkClick();">内容を変更</a>';
?>
</form>
<script>
function OnLinkClick(value) {
document.music.txtbox.value=value;
}
</script>

ajaxやjson等を使うとできるなどとは一見して書いてありましたが、どうも理解ができず
forで回しているため、一件ずつ違う値をテキストボックスに入力する必要があります。
echoをうまく使って、引数に設定できないものでしょうか？
--追記
結局は>echo '<a href="javascript:void(0);" onclick="OnLinkClick();">内容を変更</a>';
のonlincclickの中に何をどうすれば
function内のvalueに値が行ってスクリプトが実行されるかが
分かればよく、その為にjavascriptやphp以外の別の何か（ajaxとかjquery等）
が必要なら実装難しそうだから別の方法にしようと思って質問した次第です。
もちろん動けばそれでいいのですがコードを直接お願いするのはどうかなとは思ったので・・・

当方プログラム経験も他人に質問する経験もあまりありませんのでテスト中のコード必要最低限は
乗せたと思うのですが足りなければ教えて下さい

---追記２
テキストボックスである必要はないですが、 最終的には、
3つの項目を”正確に”ユーザーが入力して、それをDBに格納する必要がある ってことなんですが、
値は部分一致で検索しないと表記ゆれがはげしく、IDもユーザーに知られてない通し番号なので、
フリーテキストにしてしまうと項目を特定できず、予期せぬエラーが発生しかねない と考えています。

その為、一度検索して、その値をコピーして見た目入力している風にしたいわけです。
（hidden属性にIDを登録したほうが確実でしょうが、それくらいのことは自分で出来そうなので）

ひとまず課題であるリストをaタグか何かでクリックでフォームをコントロールする際に、
先ほど出力したSQLのリストを使えないか、ということを疑問に思いました。

しかし、先ほども仰られたようにサーバーサイドとフロントサイドで
それぞれの処理分野が違うので 単に値を受け渡すだけでは動かない、と調べました。
併せて書かれていたことがajaxやjquery等の技術を使う実装で、
まったく未経験な分野の言語だったので、もっとシンプルに実装ができないか、
ということでこの質問に至りました。

（値を渡すくらいなら、echoで文字列出力して、それをそのまま引数として渡してしまったら出来るのではないかと思いましたが、エラーが出るか無反応になってしまうので）

<form name="addone">
<input type="text" name="title" value="">
<?php

$value="tesuto";
?>
<?= $value ?>
<a href="javascript:void(0);" onclick="OnLinkClick("<?= $value ?> ");">内容を変更</a>

</form>
<script>

function OnLinkClick(value) {
document.addone.title.value=value;
}
</script>
 

結果・・・内容を変更文字をクリックしても　変化起きず

aタグを次のように変更

<?= '<a href="javascript:void(0);" onclick="OnLinkClick(\" '. $value .' \");">内容を変更</a>' ?>

結果・・・変わらず

個人的には、新しい言語に触れる体力があまりないので、限定的でもいいのでjsとphpで終わらせてしまいたいですし、なにも要件さえ満たしていればそれこそこの形式じゃなくても大丈夫なんです。 長くなってしまいましたが、よろしくお願いします。

Comments

[Lhankor_Mhy]

「一筋縄ではいかない」とありますが、具体的にはどのような問題が起きていますか？
解消すべき問題をご提示ください。

[reiya1230]

個人的には上記コードで変数の渡しが出来たらいいんですが、
出来ていない様子です。

[Lhankor_Mhy]

「出来ていない様子」とは、具体的には何が起きていますか？　エラーメッセージなどがあればご提示ください。

[m.ts10806]

過去に同様の質問何回か出てますよ。サーバーサイドとクライアントサイドの関係をきちんとおさえれば解決する要件です。

[reiya1230]

Lhankorさん
リンクをクリックしても無反応です。
もちろん、valueの値を任意の文字列にするか、ファンクション内で定義した変数にすれば反応しますが
mtsさん
なんとなくは今の実装だと直接変換することは不可能だということまでは分かりましたが、
ではもうajaxやjqueryなどを使わないと実現不可能ということでしょうか？
echoとかで直接文字列として値を送り込めそうなものなのになぜできないんでしょうか？

[m.ts10806]

サーバーサイドとクライアントサイドの関係をきちんとおさえてください。調べればいくらでもわかりやすい記事は出てきます。

[Lhankor_Mhy]

javascript のエラーが出ていると思うのですが、エラーメッセージをご提示ください。
エラーメッセージの見方がわからないようでしたら、お教えしますのでその旨お知らせください。

[m.ts10806]

それにどちらにしてもphpとして出されているコードが不完全な提示の仕方であるため、的確な、あなたに合わせた回答は不可能です。

[reiya1230]

mtsさん
ありがとうございます。
勉強しなおして出直します。
Lhankorさん
他の方の回答にもありましたが、これ以上分からないままあがいても仕方ないので
勉強しなおします

お二方とも有難うございました

[m.ts10806]

いや。質問編集してコード全体追記してもらえればそれで良いんですよ。これで自己解決にしてしまってはただのゴミにしかならない。それなら解決にせずに削除依頼だしてもらったほうがいい(受け入れられる内容ではないけど)

[Lhankor_Mhy]

わかりました。がんばってください。
今回の問題は、以下のページがヒントになるかもしれません。
https://qiita.com/nasubipenguin/items/ac9533e7e92b16edb35c

もし、ここを読んでもわからないようでしたら「php クォーテーション エスケープ」などでググってみてください。

[reiya1230]

ゴミみたいな質問してしまった私が悪いので、消し去れるものなら消していただきたいです。

[Lhankor_Mhy]

もうひとことアドバイスするなら、たぶんajaxとかいらないですよ。

[m.ts10806]

２回目
いや。質問編集してコード全体追記してもらえればそれで良いんですよ。

自分の問題をゴミにせず解決して資産にしたいのでしたら逃げないでください。ここで逃げてはなにも成長になりません。
逃げたところで困るのはあなただけです。

[m.ts10806]

これ、
テキストボックスに値入れて何がしたいんでしょうか。
やりたいこととやろうとしていることが合致してないように思います。
質問者さんがやりたいことはこのやり方しかないわけではないような。
大目的と要件具体的にしてください。
別の画面から検索ワードを入れて検索ボタンでこのphpに送信して検索結果をlikeで出す、まではわかりましたが、それをどう使いたいかが今回伝わってません。

[reiya1230]

lhankorさん
ありがとうございます。参考にさせていただきます

mtsさん
＞質問者さんがやりたいことはこのやり方しかないわけではないような。
もっともです。確かにテキストボックスである必要はないですが、

最終的には、3つの項目を”正確に”ユーザーが入力して、それをDBに格納する必要がある
ってことなんですが、値は部分一致で検索しないと表記ゆれがはげしく、IDもユーザーに知られてない通し番号なので、フリーテキストにしてしまうと項目を特定できず、予期せぬエラーが発生しかねない
と考えています。
その為、一度検索して、その値をコピーして見た目入力している風にしたいわけです。
（hidden属性にIDを登録したほうが確実でしょうが、それくらいのことは自分で出来そうなので）
ひとまず課題であるリストをaタグか何かでクリックでフォームをコントロールする際に、
先ほど出力したSQLのリストを使えないか、ということを疑問に思いました。
しかし、先ほども仰られたようにサーバーサイドとフロントサイドでそれぞれの処理分野が違うので
単に値を受け渡すだけでは動かない、とネットで調べて、併せて書かれていたことがajaxやjquery等の
まったく未経験な分野の言語だったので、もっとシンプルに実装ができないか、ということでこの質問に至りました。（値を渡すくらいなら、echoで文字列出力して、それをそのまま引数として渡してしまったら出来るのではないかと思いましたが、エラーが出るか無反応になってしまうので）
個人的には、新しい言語に触れる体力があまりないので、限定的でもいいのでjsとphpで終わらせてしまいたいですし、なにも要件さえ満たしていればそれこそこの形式じゃなくても大丈夫なんです。

長くなってしまいましたが、よろしくお願いします。

[m.ts10806]

そこは要件部分なので質問本文に追加願います。こちらはデフォルト非表示ですし、本文との連動性はあまり高くないです。(こちらを見ずに回答する人も多いですので)

[Lhankor_Mhy]

質問再開されたのですね。
消してしまったコードは
echo '<a href="javascript:void(0);" onclick="OnLinkClick(\''.$row['title'].'\');"> '.$row['title'].'</a>';
とするとよかったのではないかと思いますよ。エラーメッセージが不明のため推測ですが。

[Lhankor_Mhy]

ああ、似たようなコードを試されているのですね。失礼しました。
ただ、そのコード、出力結果を確認されていますか？ JavaScriptでも "" の内側には '' で書くか、エスケープするか、しかないですよ。

Answer 1

最も簡単にPHPの変数をjavascriptの引数にする方法

json_encodeを使いましょう。
ちょっとpsyshというREPLを使って確認してみましょうか。

$psysh
Psy Shell v0.9.9 (PHP 7.1.23 — cli) by Justin Hileman

>>> json_encode("hogehoge")
=> ""hogehoge""

>>> json_encode([1, 2, "3"])
=> "[1,2,"3"]"

>>> json_encode(["name" => "taro", "age" => 18])
=> "{"name":"taro","age":18}"

>>> json_encode('"; console.log("hoge"); "')
=> ""\"; console.log(\"hoge\"); \"""

今回の所で重要なのはString型をjson_encodeに突っ込んだ場合、
ちゃんと先頭と最後に"が補われていることです。

また、任意コードを実行させてやろうと"で強制的に止めてしまい、
console.logを仕込みましたがちゃんと"がエスケープされているために攻撃への耐性も若干獲得出来ています。

そもそもJSONは「JavaScript Object Notation」の略称であり、
コピペでJavaScriptの値として認識される式になりますからね。
なのでこの様な感じでぽんと設置することが可能となります。

<script>
var value = <?= json_encode($value) ?>;
function OnLinkClick(value)　{
  // 内容は省略
}

OnLinkClick(value);

// 直接実行しても良いね。
OnLinkClick(<?= json_encode($value) ?>);
</script>

後はちゃんとした値をPHPで作って渡して上げることです。
このへんしっかりやって、綺麗な役割分担でやりたい事を実現させてあげてくださいね。

Comments

[reiya1230]

ありがとうございます。エスケープがうまくいってなかったようですね

Answer 2

やりたいこと　だけに言及すると下記だけで良い。

<a href="javascript:void(0);" onclick="OnLinkClick('<?= $value ?> ');">内容を変更</a>

ちなみに「次のように変更」の方はhtmlコードでは下記のように出ているので動かない

<a href="javascript:void(0);" onclick="OnLinkClick(\" tesuto \");">内容を変更</a>	

firefoxではSyntaxError: invalid escape sequence
ChromeではUncaught SyntaxError: Invalid or unexpected token
html的には"の中に"はNGでそれはエスケープシーケンスを設けてても同じ。

解説記事:JavaScriptのシングルクォーテーションとダブルクォーテーション

HTML出力を伴う場合はPHP度外視で静的HTMLを作って正常に動作するか確認してから
PHPの変数を組み込むようにしてください。
「スタブ」と言ってもいいですが、熟練者でもスタブなしにいきなりすべて組み込むのは無理です。
物事には適正に動かすための順序というのがありますので。
また、出力結果HTMLを確認してスタブと同じ状態になっているかも確認することです。

---

ちなみに、OnLinkClickが沢山ある状態だと結構非効率なので、下記で拾っても良い。

<a href="javascript:void(0);" class="list">aaaa</a>
<a href="javascript:void(0);" class="list">bbbb</a>

const targetList = document.querySelectorAll('a.list');
for(i=0;i<targetList.length;i++){
	targetList[i].addEventListener('click',OnLinkClick);
}

function OnLinkClick() {
	document.addone.title.value=this.innerText;
}

※元々onclickで引数渡さなくても中身のテキストと同じ内容を渡すのであればthis.innerTextで拾えたはず

• querySelectorAll()
• addEventListener()
• innerText

---

蛇足

別途コメントで「やりたいこととやろうとしていることが合致してないように思います」と
私は書きましたが、その通りで間違いなさそうです。

ただ、

細かいツッコミをしますと、

PHPで下記のようなシステムを作っています。

・テキストボックスに検索する値を入力すると、一覧がDBからlike検索されて出てくる
・検索はselect文で行われ、一件ずつforeachで回して表示しています

これは「システム」ではなくもっと小さな部品を作るための手順です。
「システム」というと、teratailで例えると「技術特化の質問サイト」と表現するものです。
その中で上記は「任意入力で部分一致する質問を出力します」というもののみで、
「技術特化の質問サイト」の機能の1部分でしかないことを示しています。

というように「システムの全貌」が今ひとつ理解できない質問内容ですし、
あまりここだけで書きすぎると本題から離れていくと思いましたので、
申し訳ないのですが細かいツッコミのみにしました。
これは質問内容を充実してもらうしかないかもしれません。
部品の話ではなく、「システムの要件」「機能の仕様」ですね。
ここは言語が関係しないところなので、もう少しきちんと詰めたほうがいいかもしれません。

---

ajaxやjquery等の技術を使う実装で、

まったく未経験な分野の言語

これも言葉の正確性が良くないかもしれません。
Ajaxは概念ですし、jQueryはJavaScriptのライブラリです。

Ajaxについて軽く触れますと、
PHPでも「リクエストとレスポンス」の概念を理解するのは必須です。
1つの例でですと、入力フォームから入力情報をPHPに渡すのが「リクエスト」
そのリクエストを受け取って何らかの処理をして結果を返すのが「レスポンス」です。
それを「送信元画面→送信先画面」で行っているか「送信元画面→API→送信元画面」でやっているかの違いだけとなります。
（それが画面遷移を伴うかどうかの違い）

APIというのを聞いたことあるかもしれませんね。
郵便番号検索APIとか。
郵便番号を条件として渡すとその結果の住所が返ってくるもの。
あれですね。あの「画面から郵便番号を渡して、その結果を返す」のはAjaxの仕組みの1つと言えます。
レスポンスで画面を返すのではなくデータそのものをJSON形式などで返すわけですね。
つまりそういう感じ。

Ajaxのメリットとかは調べて出てくる記事のほうがよっぽど詳しく書かれているのでそちらを参照。

jQueryについて。
これはあくまでJavaScriptのライブラリで、大きなメリットとしては複雑な処理を簡潔に書ける、ということですね。
私の回答のコードをjQueryで書くとこんな感じ

$(".list").on("click",function(){
	$("input[name=title]").val($(this).text());
});

※ただし、速さを言及するならpure javascriptのほうです。

新しい言語に触れる体力があまりない

誰しも一気に複数のことを同時にすることはできません。
人間は基本的にシングルタスクです。
急がば回れ。何も焦る必要はないです。
むしろ、現時点の技術であまり段階が上のものに手を出してしまうと
基礎がかためられないので、もっと地固めに集中されたほうが結果的に確実な技術が身に付きます。

以上。

Comments

[reiya1230]

前回の回答から遅くなってすみません。
ありがとうございます。
無事に機能がつけられました。
その他についても少しづつ参考にさせていただきます

[m.ts10806]

解決されたようで何よりです。