DBの値を利用して、3つの連動したセレクトフォームを作りたい

今回作りたいものは、このサイトで質問する際の「投稿カテゴリー選択フォーム」と全く同じものです。

大中小のカテゴリーを選択するドロップダウンリストが３つあり、大カテゴリーを選べばそれに応じた中カテゴリーの値が２つ目のドロップダウンリストに入り、
大と中のカテゴリーを選べばそれに応じた小カテゴリーの値が３つ目のドロップダウンリストに入る。というものです。

リストに使うデータは、全てデータベースから取得してきます。（各カテゴリーのデータを格納した３つのテーブルがあります。）

ベースはPHPで作成していますが、この動作を行うにはJavaScriptが必要だとか、onChangeというものを使えばいいとか、ある程度調べたのですが、具体的にどのように記述すればいいのかわかりません。
サンプルが置いてあるサイトも見たのですが、ドロップダウンリストが２個だったり、リストに入るデータが数個の固定された文字列だったりと、応用できるものではありませんでした。

当方、PHPは若干わかりますが、JavaScriptに関してはほとんど知識がありません。
詳細まで教えていただける方、もしくは同じ内容の解説が載っているサイトなどがあれば教えてください。
よろしくお願いします。

No.4 ベストアンサー 回答者： yambejp 回答日時： 2007/10/10 12:04

うまく伝わってないようで申し訳ないです。

つまりこういうことです。

<?PHP
$url=($_REQUEST["cat3"]=="")?$_SERVER["PHP_SELF"]:"entry.php";
//カテゴリ３までしっかりデータがはいってない限り再帰的処理をする
print<<<eof
<form action="{$url}">
<select name="cat1" onChange="this.form.submit()">
<option></option>......
</select>
<select name="cat2" onChange="this.form.submit()">
<option></option>......
</select>
<select name="cat3" onChange="this.form.submit()">
<option></option>......
</select>
<input type="text" name="namae" />
<input type="text" name="email" />
<input type="submit" value="送信" />
</form>

eof;

?>

この回答へのお礼

私の勉強不足で理解できていなかったようです。
申し訳ありません。
$urlの取り扱い手法は全く知りませんでした。(^^ゞ
理解して先に進みたいと思いますので、ご提示いただいたソースをもとに勉強しなおします。
ありがとうございました。

お礼日時：2007/10/10 23:58

No.3 回答者： yambejp 回答日時： 2007/10/08 23:35

>カテゴリーと他の項目は送り先が違うので、フォームを分けるしかないように思います。

論点がずれている気がします。
結局カテゴリを選択するまでentry.phpにデータを送ることはないので
formは一つあれば充分です。
カテゴリ１を選ぶ→自分にデータを送る→カテゴリ２を選ぶ→自分にデータを送る→
カテゴリ３を選ぶ→自分にデータを送る→ここではじめえてactionに
entry.phpをプログラムで書きこんでやるのが妥当です。
つまりはjavascriptでsubmitこそしていますが、実際にはsubmitボタンを
押しても同じです。
データが足りないときは再帰的な処理がされて、最後すべてのデータが
そろったところではじめて登録画面にデータをおくってやるということです。

セッションとかクッキーとか最初から無理しないで、仕組みをよく
理解すれば解決方法はみえてきますよ。

この回答へのお礼

たびたびご回答ありがとうございます。

「カテゴリーと他の項目は送り先が違う」という理由は、
カテゴリーを選んだ時のデータの送り先は自分自身なので、<form action="$PHP_SELF">となると思います。
一方、フォーム全部のデータの送り先はentry.phpなので、<form action="entry.php">となると思います。
よって、一つのフォームに異なる送り先（action="送り先"）を設定できないのではないか？と思ったからです。

現状では、以下のようなソースで作成しています。
<form action="$PHP_SELF">
<select name="cat1" onChange="this.form.submit()">
<option></option>......（←DBのデータをPHPで処理して作成）
</select>
<select name="cat2" onChange="this.form.submit()">
<option></option>......
</select>
<select name="cat3" onChange="this.form.submit()">
<option></option>......
</select>
</form>

<form action="entry.php">
<input type="text" name="namae" />
<input type="text" name="email" />
<input type="submit" value="送信" />
</form>
としています。
一つ目のフォームでsubmitした時に、
if (isset($_POST['cat1'])) $_SESSION['cat1'] = $_POST['cat1'];
としてセッションに格納し、二つ目のフォームをsubmitした時に、（カテゴリーデータをセッションに格納した状態で）entry.phpに渡しています。
これを、一つのフォームにまとめることができるのでしょうか？

参考までに、entry.phpでは、
$_SESSION['cat1']
$_SESSION['cat2']
$_SESSION['cat3']
$_POST['namae']
$_POST['email']
を受け取って処理しています。

お礼日時：2007/10/09 20:44

No.2 回答者： yambejp 回答日時： 2007/10/06 10:58

>セレクトするたびにsubmitする方法で挑戦しているのですが、

>submitした際、他の入力データが消えてしまいます。

フォームを分けてはいけません。
フォームを分けてしまうと登録ボタンをおしても選んだデータは
サーバー側におくられませんのでなんのために選んだか意味がなくなります。

最終的にentry.phpにデータをながしたいのでしたら、最後の
カテゴリが選ばれた際にフォームのアクションがはいるような
仕組みにしてはどうでしょうか？

この回答へのお礼

カテゴリーを選んだ後、他の項目を入力し、それら全てをentry.phpに送りたいと思っています。
カテゴリーと他の項目は送り先が違うので、フォームを分けるしかないように思います。
カテゴリーデータはセッションに格納して、entry.phpで利用しようと思っています。

お礼日時：2007/10/08 17:56

No.1 回答者： yambejp 回答日時： 2007/10/05 12:45

カテゴリを絞り込む場合、すべてのデータを最初から取得してしまう

方法と、カテゴリを絞る度に検索してほんとうに絞り込んでいく方法が
あります。
前者であれば、javascriptの連想配列にデータを最初から流し込んでおけば
ちょいちょいとできそうですが、オーバーヘッドが大きいので私なら
やりません。
まっとうにやるなら後者になります。
その場合、セレクトするたびにsubmitしてデータを得る方法と、
ajaxを使う方法があります。

例）
<form>
<select onChange="this.form.submit()">
<option value=1>1
<option value=2>2
</select>
</form>

ちなみにajaxについてはここで解説するには膨大すぎますので、
必要でしたらまずはご自身で学習してください。

この回答への補足

お礼欄に記載したソースのformの部分は、それぞれ
<form name="form1" action="$PHP_SELF" medhot="post">
と記述しております。
４つ目のフォームのみ、POSTされたデータを処理する別のPHPに飛ばしてます。

補足日時：2007/10/05 23:58

この回答へのお礼

ありがとうございます。
少し進歩しましたが、新たな問題が発生しました。
セレクトするたびにsubmitする方法で挑戦しているのですが、submitした際、他の入力データが消えてしまいます。

ソースは、以下のように記述しておりますが、最後のフォームのテキストボックスに入力した状態でドロップダウンリストを変更すると、テキストボックスの値が消えてしまいます。
「入力する前に選択してください」のようなコメントをつけて回避するしかないのでしょうか？

<form name="form1">
<select onChange="form.form1.submit()">
<option value="1">1
・・・
</select>
</form>
<form name="form2">
・・・
</form>
<form name="form3">
・・・
</form>
<form name="4" action="entry.php" method="post">
<input type="text" name="comment">
<input type="submit" value="登録">
</form>

お礼日時：2007/10/05 23:55