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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

Q&A

解決済

2回答

1650閲覧

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

reiya1230

総合スコア20

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

0グッド

1クリップ

投稿2019/03/02 02:10

編集2019/03/02 10:41

前提・実現したいこと

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

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

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

試したこと

php

1 2 <?php 3if(isset($_POST['search'])){ 4 if($_POST['word']!=""){ 5 $sth = $pdo->prepare(" SELECT * from tracks where title like :word "); 6 $sth->bindValue(':word', '%'.$_POST['word'].'%', PDO::PARAM_STR); 7 8 $sth->execute(); 9 foreach($sth as $row) { 10 echo '<a href="javascript:void(0);" onclick="OnLinkClick();"> '.$row['title'].'</a>'; 11 echo $row['title']; 12 echo ' '; 13 if($row['grv']!=0){ 14 echo $row['grv']; 15 } 16 echo '<BR>'; 17 } 18 19 } 20} 21 ?> 22 23 24<form name="music"> 25<input type="text" name="txtbox" value=""> 26<?php 27 28$value="aaaa"; 29echo '<a href="javascript:void(0);" onclick="OnLinkClick();">内容を変更</a>'; 30?> 31</form> 32<script> 33function OnLinkClick(value) { 34document.music.txtbox.value=value; 35} 36</script> 37

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

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

---追記2
テキストボックスである必要はないですが、 最終的には、
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で終わらせてしまいたいですし、なにも要件さえ満たしていればそれこそこの形式じゃなくても大丈夫なんです。 長くなってしまいましたが、よろしくお願いします。

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

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

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

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

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

Lhankor_Mhy

2019/03/02 02:38

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

2019/03/02 02:41

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

2019/03/02 02:47

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

2019/03/02 02:57

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

2019/03/02 03:02

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

2019/03/02 03:06

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

2019/03/02 03:06

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

2019/03/02 03:07

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

2019/03/02 03:12

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

2019/03/02 03:15

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

2019/03/02 03:21 編集

わかりました。がんばってください。 今回の問題は、以下のページがヒントになるかもしれません。 https://qiita.com/nasubipenguin/items/ac9533e7e92b16edb35c もし、ここを読んでもわからないようでしたら「php クォーテーション エスケープ」などでググってみてください。
reiya1230

2019/03/02 03:20

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

2019/03/02 03:30

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

2019/03/02 03:49

2回目 いや。質問編集してコード全体追記してもらえればそれで良いんですよ。 自分の問題をゴミにせず解決して資産にしたいのでしたら逃げないでください。ここで逃げてはなにも成長になりません。 逃げたところで困るのはあなただけです。
m.ts10806

2019/03/02 04:15

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

2019/03/02 10:27

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

2019/03/02 10:34

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

2019/03/02 10:49

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

2019/03/02 10:55

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

回答2

0

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

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

Bash

1$psysh 2Psy Shell v0.9.9 (PHP 7.1.23 — cli) by Justin Hileman 3 4>>> json_encode("hogehoge") 5=> ""hogehoge"" 6 7>>> json_encode([1, 2, "3"]) 8=> "[1,2,"3"]" 9 10>>> json_encode(["name" => "taro", "age" => 18]) 11=> "{"name":"taro","age":18}" 12 13>>> json_encode('"; console.log("hoge"); "') 14=> ""\"; console.log(\"hoge\"); \"""

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

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

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

HTML

1<script> 2var value = <?= json_encode($value) ?>; 3function OnLinkClick(value) { 4 // 内容は省略 5} 6 7OnLinkClick(value); 8 9// 直接実行しても良いね。 10OnLinkClick(<?= json_encode($value) ?>); 11</script>

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

投稿2019/03/03 02:07

miyabi-sun

総合スコア21158

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

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

reiya1230

2019/03/05 03:18

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

0

ベストアンサー

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

php

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

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

html

1<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が沢山ある状態だと結構非効率なので、下記で拾っても良い。

html

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

js

1const targetList = document.querySelectorAll('a.list'); 2for(i=0;i<targetList.length;i++){ 3 targetList[i].addEventListener('click',OnLinkClick); 4} 5 6function OnLinkClick() { 7 document.addone.title.value=this.innerText; 8}

※元々onclickで引数渡さなくても中身のテキストと同じ内容を渡すのであればthis.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で書くとこんな感じ

js

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

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

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

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

以上。

投稿2019/03/02 22:41

編集2019/03/02 23:10
m.ts10806

総合スコア80765

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

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

reiya1230

2019/03/05 03:26

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

2019/03/05 03:27

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問