プルダウンメニューの選択変更時にPHPの処理を発動させる方法、およびPHPからJavascriptの自作関数を呼び出す方法

やりたかったことは以下の通り。

  1. あるプルダウンメニューで選択を変えると、
    他のプルダウンメニューの選択状態などが変わる
  2. その変更内容は、DBから取得したい

＜制約条件＞
・Ajax（発音はエイジャックス）とかSmartyとか流行りのことは知らない

ということなのだが、
「よくわからないけどなんとかできるだろー」
とか適当に始めてみたところ、
かなりの罠があって、ひっかかりまくった。

解決するに当たり、先人の方々の解決メモに
大変お世話になったので、
私も罠の内容と解決策をメモしておく。

当初の方針は以下のようなものだった。

A. 「プルダウンメニューの選択を変えると処理が始まる」は
Javascriptを使う(selectタグのonChange())
B. Aの内容を元に、サーバサイド言語(ここではPHP)でDBとやりとりする
C. DBから取得した内容を元に、Javascriptで
他のプルダウンメニューの選択状態を変更する

しかし、問題が続発した。

問題1　AとBの連携：Javascript→PHPの処理呼び出し？

Aは、selectタグに仕込む。


<select id="id1" onChange="function()">

みたいな感じ。

このfunction()はJavascriptの外部ファイルとかで定義しておく。

Bは、PHPでDBと会話すれば良く、
これは調べればいくらでも出てくるので問題ない。

ところが、AとBの流れを考えると、

Aで呼び出されるJavascriptの関数から、
BのPHPでやる一連の処理を呼び出さなければならない。

でもJavascriptからPHPを呼び出すのってどうやるの？

調べても、なんかできなさそうな感じだった。

＜解決策＞

form(HTML)→Javascript→PHP
はなんか無理そうだったので、
form(HTML)→PHP⇄Javascript
とした。

ベースの処理はPHPにする。
でないとDBとの会話ができない。
で、PHPにJavascriptのコードを吐かせて
Javascriptの処理を実行する、
みたいな感じ。

やり方はこちらを参照のこと。
・PHPとJavaScriptの連携 - PHPプログラミング解説
・PHP TIPS - 12. JavaScriptをPHPで記述しよう：ITpro

要は、下のようにしてPHPにJavascriptをお話ししてもらう。


print<<<EOF
<script type="text/javascript">
〜Javascriptでやりたいこと〜
</script>
EOF;

引数は、手抜きしてoptionのhiddenで渡す。

＜トリガー＞
onChangeだとJavascriptしか呼び出せないので、

<form method="POST" action="hogehoge.php">

みたいにしてphpファイルを呼び出すことにした。

ただこれだと、ボタンを押すと発動するのだが、
プルダウンメニューの変更では発動しない。
かつ、hogehoge.phpにページ遷移してしまうので、
元ページの他のプルダウンメニューを変更できなくなってしまう。

要は、プルダウンメニュー変更でhogehoge.phpを呼び出しつつも、
ページ遷移したくない。

調べたら、なんかできた。
→値だけ送信してページは遷移させないためには？ - CGI - 教えて！goo


<form target="fr1" action="hogehoge.php">
<select id="id1" onChange("this.form.submit()")>

として、その前あたりに


<iframe name="f1" width=0 height=0 style="visibility:hidden"></iframe>

みたいなフレームを仕込む、というやり方。
ページ遷移もなく、あたかもonChangeでPHPを呼び出している
ような感じになった。

これで第一ハードルクリア。

問題2　BとCの連携：PHP→Javascriptの処理呼び出し？

なんとかonChangeっぽくプルダウンメニュー変更でPHPの処理を発動し、
DBからデータを取り出すところまではできた。

しかし、その内容で他のプルダウンメニューの変更をする場合、
「PHPでDBから取得した内容をJavascriptに渡す」
ということが必要になる。

元のページ(HTML)で


<script type="text/javascript" src="hogehoge.js">

みたいな感じで呼び出しておいたのだけど、PHPの処理中に
「そんな関数知らね」
とかエラーが。もう意味わかんない。

＜解決策＞

PHPのファイル（hogehoge.php）の最初にも


print<<<EOF
<script type="text/javascript" src="hogehoge.js"></script>
EOF;

みたいにしてJavascriptの外部ファイルを読み込ませておく。
（むしろ呼び出し元のHTMLの方には不要）

これは、
「formで呼び出されたhogehoge.phpの世界」
で起きていることなので、
「元のHTMLの世界」
で呼び出しておいても関係ないのですな。
あらうっかり！

ページ遷移しない細工をしていたので、
気づくのに手間取ってしまった。

ともあれ、これでOK。

PHPの処理内で、自作のJavascriptの関数を呼び出せる。
呼び出し方は以下のような感じ。引数も渡せる。


print<<<EOF
<script type="text/javascript">
kansuu($var1);
</script>
EOF;

受けるJavascript側はこんな感じ。


function kansuu(var1){
〜やりたい処理〜
}

書くまでもないか？

問題3　他のプルダウンメニューの選択状態が変えられない

これで、だいたいやりたいところはできた。
  • onChangeっぽくプルダウンメニュー変更でPHPを呼び出し
  • PHPでDBからデータ取得
  • その内容をJavascriptの処理に渡す

最後の詰めで、Javascriptで他のプルダウンメニューの
選択状態を変えようと思ったのだけど、
なんかピクリともしない。なんで？

いつも通り


document.getElementById()

みたいに指定していると
「そんなの見つかりません」
とおっしゃる。

？？？

＜解決策＞

hogehoge.phpは、
ページ遷移を避けるために作ったフレーム内で動いている。
なので、同じフレーム内を指している


document.getElementById('id')

ではなく、


parent.document.getElementById('id')

としてやらないといけない。
うへ〜。罠だらけ。

ちなみに、プルダウンメニューの選択状態を変更をするには、


parent.document.getElementById('id').selectedIndex = the_index;

みたいにする。
私は、これ以外のやり方ではできませんでした。

the_indexは、がんばって取得する。

まとめ


  • PHPとJavascriptの連携はかなり強力
  • JavascriptからPHPを呼び出すのではなく、
    PHPを走らせその中でJavascriptのコードを吐かせる
  • onChange()っぽく.phpファイルを呼び出すこともできる
  • PHP内でJavascriptの外部ファイルも読み込める

なんか結構なんでもできるな、というのが印象。
ただ、処理速度とかそういうのは考えていないので、
その辺りはえらい人になんとかしていただけるとうれしい。

ちなみに、この一連の制約はDBと会話するから発生していて、
例えばCSVから読み込むのでよければ、
こんなめんどくさいことは不要で、Javascriptだけでできた。

てか、Ajax（発音は以下略）使えばできるんでしょ？知らないけど。

お世話になったサイト
・PHPとJavaScriptの連携 - PHPプログラミング解説
・PHP TIPS - 12. JavaScriptをPHPで記述しよう：ITpro
・ＰＨＰ入門
・フォームからの入力 | PHP Labo