- ベストアンサー
リストボックスを使った検索フォームの作成方法
- リストボックスを使用して、ｇｏｏの質問フォームのような検索フォームを作成したいと思っています。どのようにすれば実現できるのでしょうか？
- リストボックスを２つ設けて、最初のリストボックスから選択した項目に応じて、次のリストボックスに表示する項目を選択したいと思っています。
- 具体的には、例えば最初のリストボックスで「名前」を選んだ場合は次のリストボックスには氏名が表示されるようにしたいです。また、「日付」を選んだ場合は日付が表示されるようにしたいです。どのようにすれば実現できるのでしょうか？
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
ファイル構成がわからないのではっきりはいえませんが、 list_change.phpにはjavascriptのソースを <?php fanction ListChange(val) { 省略 } ?> のように記述しているのでしょうか。 このエラーはphpのエラーなので、valに値が入ると ListChange(register) のようになってしまって『$』がないためにエラーが出るといったことが考えられると思います。 javascriptは、以下のように<head>に記述して外部ファイルを使用します。 <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="aaa.js"></script> </head> このようにして、aaa.jsファイルに fanction ListChange(val) { 省略 } と記述すれば関数を使うことができます。 >下のようなソースでlist1，list2のvalueを変数で取得したい とのことですが、この処理の流れは、 list1を選択 → 選択した時点でlocation.hrefを使ってlist1の値を同じファイルに渡す → list1の値を取得してlist2のセレクトを作成 → list2とチェックボックス（必要な場合のみ）を選択 → 検索ボタンを押下 → list1、list2、（todo_check）の値をPOSTで同じファイルに渡す → 渡された値を取得 という流れで良いのでしょうか？ list1とlist2の値をPOSTで取得するには、検索ボタンを同じフォームの中に入れて作れば受け取ることができます。 以下、このような感じで作っているのではと、追加分を含めたソースです。 ファイル構成がわからないと説明しにくいので確認も含めてです。 <?php //list1の値はGETで取得 if ($_GET["list1"]!="") { $list1_val = $_GET["list1"]; } elseif($_POST["list1"]!="") { $list1_val = $_POST["list1"]; } else { $list1_val = "default"; } $list2_val = $_POST["list2"]; $todo_check_val = $_POST["todo_check"]; print_r($list1_val); //値の確認用 print_r($list2_val); //値の確認用 print_r($todo_check_val); //値の確認用 /** list1の値を使ってlist2の配列を取得 セレクトの作成はこの部分かhtml内で行う **/ ?> <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="aaa.js"></script> </head> <body> <form name="form" method="post" action="<?php echo $PHP_SELF; ?>"> <table border="1" align="center"> <tr> <td> <div align="center"> <select name="list1" onchange="javascript:ListChange(this.value);"> <option value="default">検索項目</option> <option value="register"<?=($list1_val=="register")?" selected":"";?>>登録者で検索</option> <option value="worker"<?=($list1_val=="worker")?" selected":"";?>>作業者で検索</option> <option value="machine"<?=($list1_val=="machine")?" selected":"";?>>機種名で検索</option> </select> </div> </td> <td> <div align="center"> <!-- ここでlist2の配列からセレクトを作成するか、作成したセレクトを<?=$obj_select?>などとして挿入 --> <select name="list2"> <option>自動で入れ替わります</option> <option value="aaa"<?=($list2_val=="aaa")?" selected":"";?>>aaa</option> <option value="bbb"<?=($list2_val=="bbb")?" selected":"";?>>bbb</option> </SELECT> <!-- セレクト（list2）ここまで --> </div> </td> <td> <div align="center"><input type="checkbox" name="todo_check" value="on"<?=($todo_check_val=="on")?" checked":"";?>>完了したTodoも表示</div> </td> <td> <div align="center"><input type="submit" name="search" value="検索"></div> </td> </tr> </table> </form> </body> </html>
その他の回答 (5)
- caitsith_goo
- ベストアンサー率59% (28/47)
>まず、下のPHPプログラムですが、fanction ListChange(val)に変数を入れるとエラーになります。 >ListChange()のように変数なしでは実行できるのですが．．． 実行できる状況は、 function ListChange() { location.href = '○○.php'; } とやると実行できるが、 function ListChange(val) { location.href = '○○.php?list1='+val; } とやると、『構文エラーです』のようなエラーが出てjavascriptが動かないのでしょうか。 こちらでは特にエラーが出ることはないのですが。。 >JavaScriptの方ですが、文字列の代入を下のようにしましたが表示されませんでした。 >デフォルトの自動で入れ替わりますという文字が消えるだけです。 >もう1つ教えていただいたecho文では構文エラーとなり実行できませんでした。 <php while ($result = mysql_fetch_array($resultId)){ $Name[] = $result[name]; $Value[] = $i; $i++; } ?> まず var name_value = new Array(<?=$Name?>); とやってダメだったことについてですが、 この場合、$Nameは配列ではなく文字列を作る必要があります。 『"aaa", "bbb", "ccc"』という文字列を作って、 var name_value = new Array("aaa", "bbb", "ccc"); と書出すということを行います。 なので、 <?php $i = 0; $Name = ""; while ($result = mysql_fetch_array($resultId)){ $Name .= ($i!=0)?", ":""; $Value .= ($i!=0)?", ":""; $Name .= "\"".$result[name]."\""; $Value .= "\"".$i."\""; $i++; } ?> このようにして文字列を作成します。（文字列があっているかどうかは『print();』などを使って確認してください） この文字列を var name_value = new Array(<?=$Name?>); とすればできるはずです。 また、echoを使うのは<?php ?> で囲っている中でHTMLの書き出しを行う場合に使用するので、HTMLとphpの部分を分けているなら、<?=$Name?>で書出せば大丈夫です。
補足
何度もありがとうございます。 >fanction ListChange(val)に変数を入れるとエラーになります。 >ListChange()のように変数なしでは実行できるのですが．．． ListBox表示のソース上にlist_change.phpをincludeしてファイル内のfunction ListChange(value)を参照するようにしています。 エラーの内容ですが、次のようなメッセージです。 line2 にはfunction ListChange(value) { が宣言されています。 Parse error: parse error, unexpected T_STRING, expecting ')' in C:\Apache2\htdocs\list_change.php on line 2 >JavaScriptの方ですが >この場合、$Nameは配列ではなく文字列を作る必要があります。 無事解決いたしました。動作いたしました。 Arrayとあったので配列だと思い、文字列の配列をつくったのが原因でした。 ここでまた分からない箇所が出たのですが、下のようなソースでlist1，list2のvalueを変数で取得したいのですが、どのようにすればよいのでしょうか？ hiddenや$_POSTなど使って取得したいのですがどうすればよいですか？ リスト表示する項目を選択し、「検索」ボタンを押してください。 <table border="1" align="center"> <tr> <td><div align="center"> <form name="form"> <select name="list1" onchange="listChange()"> <option value="default">検索項目</option> <option value="register">登録者で検索</option> <option value="worker">作業者で検索</option> <option value="machine">機種名で検索</option> </select></div></td> <td><div align="center"><select name="list2"><option>自動で入れ替わります</option> </SELECT></div></td></form> <form method="post" action="<?php echo $PHP_SELF; ?>" > <td><div align="center"><input type="checkbox" name="todo_check" value="on">完了したTodoも表示</div></td> <td><div align="center"><input type="submit" name="search" value="検索"></div></td> </form> </tr> </table> 何度もすいませんが、よろしくお願いします。
- caitsith_goo
- ベストアンサー率59% (28/47)
説明不足で申し訳ありませんでした。 質問の仕方やコンピュータに関する回答をいくつかされていたので、初心者の方ではないような感じがしたので説明を端よってしまいました。 変な意味ではなく、詳しく説明させていただきます。 すでにわかっていることもあるかと思いますがそのときは読み飛ばしちゃってください。 まずNo.2の返信についてです。 >○○.phpでlist2のセレクトを作成するということですが、ここで表示もするのいでしょうか？ 今回作成しようとしているのは、htmlとphpとjavascriptを同じファイルに記述していますか？ だとすれば、list1の値を同じファイルに渡してlist2を作成するということで大丈夫です。 >location.href = '○○.php?list1='+val; >のvalはvalueの間違いですか？valでも良いのでしょうか？ <select name="list1" onChange="ListChange(this.value)"> このセレクトボックスを選択した（違うのを選んだ）時に、 function ListChange(val) { location.href = '○○.php?list1='+val; } この関数を実行するという処理になります。 このとき、onChange="ListChange(this.value)" とありますが、ListChangeの関数に対して『this.value』という値を渡しています。 『this.value』とは、関数が実行されるときのセレクトボックスの値を示していて、これによってそのときの値を関数に渡すことができます。 関数の記述は function ListChange(val) { となっていますが、括弧の中にある『val』は渡されてきた値を表します。 この『val』は関数内で使用される変数で、渡された値をこの関数内ではこのように処理するという意味で使われます。 そのため、テキストボックスやチェックボックスからなど、どんな値がきても関係なく関数を汎用的に使うことができます。 この変数は宣言する必要がなく、自分のわかりやすい名前をつけることができます。 『select_value』でも『atai』でもなんでもいいです。 >の関数内に○○.phpのコード内容を直接書いても同じですか？ location.href = ○○ というのは、HTMLの<a>タグと同じ働きをして、 この関数が実行されたときに記述されているファイルにジャンプするという処理をします。 ジャンプするときにlist1の値を一緒に渡してほしいので location.href = '○○.php?list1='+val; という記述をしています。（valについては上記参照） そのため、コード内容を書くのではなく、ジャンプしたいファイル名を記述することになります。 No.3の方への返信にあった、 >phpを使うため、ブラウザから情報をサーバーへ送って書き換える手法はないのでしょうか？ という質問に対しては、 No.3の方が回答した、 『サーバー側だけで処理するには、いったんリスト１だけを画面に表示し、ボタンを押させた上で、次の画面でリスト２を出すしかありません。』 という方法があります。 この方法の説明です。 list1で選択→サブミットボタンを押して同一ファイルに値を渡す→list1の値を取得してlist2を作成 という流れになります。 <form action="○○.php" method="POST"> <select name="list1"> 省略 </select> <input type="submit"> </form> と記述することで動作できます。 この方法はjavascriptを使って少し変化させることができて、 <form name="f1" action="○○.php" method="POST"> <select name="list1"> 省略 </select> <input type="button" onClick="DataSend()"> </form> function DataSend() { document.f1.submit(); } とすることで同じ動作をさせることができます。 僕がNo2.で回答した、 『list1を選択した時に、 location.hrefではなくてonChangeでサブミットしてしまう方法もあると思います。』 という方法は、上の方法をさらに変形させたようなもので、 list1を選択した時点でonChange="DataSend()"を使って、ボタンを押さないで同じ処理を行う方法です。 list2を変化させるという点ではどれも同じ結果が出るのですが、それぞれの使い分け方を説明します。 No.1の方法を方法１。 No.3の方法を方法２。 No.2の２つの方法とNo.3の方の変形させた方法をまとめて方法３。 とします。 方法１： 画面を新たに読み込んだりしないため、セレクトボックス以外にテキストボックスなどの入力フォームがあった場合に、すでにユーザーが記入した値はそのまま残ります。 javascriptを使うので閲覧するマシンの状況で動かない場合があります。 ブラウザによってjavascriptの記述を変化させる必要があるかもしれないのでその確認が必要となります。 方法２： サブミットさせるだけなのでjavascriptの対応などは関係ありません。 しかし、すでに入力されている値なども受け取ってから再度フォームに埋め込む必要があります。（そんなに面倒ではないですが） 方法３： javascriptは使用しますが、ブラウザ間で記述を変化させる必要はまずありません。 javascriptを禁止されていない限り問題ないです。 入力されている値の受け渡しが少し手間です。（ただ記述が多くなるというだけですが） なら方法２のほうがいいだろうという感じですが、いいところは 方法２はサブミットボタンを押してサブミットさせる。 方法３はボタンを押す。セレクトを選択する。といった動作を行ったときに処理を実行してサブミットさせる。 という違いがあり、サブミットさせるまでの間に色々な処理を入れやすいことがあります。 アラートを出すとか、計算するとか。。。 実は方法２でもサブミットさせる前に処理を入れることはできるのですが、ちょっぴり難しい感じなので。 （return・true・falseを使いこなせるなら問題ないです） このような感じで使い分けができると思います。 以上長文失礼いたしました。 参考になればと思います。またよろしくお願いします。
補足
ありがとうございます。 自分のプログラムに移したところ、わからないところがあります。 まず、下のPHPプログラムですが、fanction ListChange(val)に変数を入れるとエラーになります。 ListChange()のように変数なしでは実行できるのですが．．． <select name="list1" onChange="ListChange(this.value)"> <option value="default">検索項目</option> <option value="name">名前</option>); <option value="date">日付</option>); <option value="team">チーム</option>); </select> function ListChange(val) { location.href = '○○.php?list1='+val; } JavaScriptの方ですが、文字列の代入を下のようにしましたが表示されませんでした。 デフォルトの自動で入れ替わりますという文字が消えるだけです。 もう1つ教えていただいたecho文では構文エラーとなり実行できませんでした。 <php while ($result = mysql_fetch_array($resultId)){ $Name[] = $result[name]; $Value[] = $i; $i++; } ?> <script language="JavaScript"> <!--- function listChange() { var default_ary = new Array("自動で入れ替わります"); //var name_text = new Array("鈴木", "佐藤", "田中"); var name_value = new Array(<?=$Name?>); //var name_value = new Array("suzuki", "sato", "tanaka"); var name_value = new Array(<?=$Value?>); var machine_text = new Array("FZ2181", "FZ5180", "FZ-10"); var machine_value = new Array("2181", "5180", "10"); 何度もすいませんが、よろしくお願いします。
- taba
- ベストアンサー率61% (349/567)
＞ただ、やはりjavascriptを使わなければ出来ないのでしょうか。 フォームの書き換えは、ユーザー側のブラウザにデータがすべて送られてしまっている以上、javascriptなどユーザー側で動作するプログラムは必須です。 phpで書き換えるためには、ブラウザから情報をサーバーへ送る必要がありますから。 サーバー側だけで処理するには、いったんリスト１だけを画面に表示し、ボタンを押させた上で、次の画面でリスト２を出すしかありません。
お礼
回答ありがとうございます。 javascriptの知識がなく、phpも始めたばかりなので回答の内容を理解するのでせいいっぱいでした。 phpを使うため、ブラウザから情報をサーバーへ送って書き換える手法はないのでしょうか？ まずは、No.1，No.2のコードから動作させてみて、理解を深めていこうと思います。 ありがとうございました。
- caitsith_goo
- ベストアンサー率59% (28/47)
他の方法としては、 <select name="list1" onChange="ListChange(this.value)"> <option value="default">検索項目</option> <option value="name">名前</option>); <option value="date">日付</option>); <option value="team">チーム</option>); </select> function ListChange(val) { location.href = '○○.php?list1='+val; } として、○○.phpでlist1の値に対応するlist2のvalueとtextの配列をDBから取得し、このページでセレクトを作成します。 list1で選択した値を使って再度同じページを開き、そのときにlist2を作成するという処理です。 DBから値を取得してセレクトを作成するクラスを作っておくと楽です。 list1を選択した時に、 location.hrefではなくてonChangeでサブミットしてしまう方法もあると思います。 また、 var name_value=newArray("suzuki", "sato", "tanaka"); とするやり方ですが、 DBから取得したデータで、『"suzuki", "sato", "tanaka"』という文字列を作っておいて、 var name_value=newArray(<?=$name_value?>); または echo "var name_value=newArray(".$name_value.");"; とします。
お礼
回答ありがとうございます。 回答の内容が難しく苦戦していました。 あまり簡単な質問を聞いては失礼なので自分なりに考え込んでしまい返答が遅くなりました。 内容は大体わかったつもりでいますが、分からなかった部分を質問させてもらいます。 ○○.phpでlist2のセレクトを作成するということですが、ここで表示もするのいでしょうか？ location.href = '○○.php?list1='+val; のvalはvalueの間違いですか？valでも良いのでしょうか？ function ListChange(val) { location.href = '○○.php?list1='+val; } の関数内に○○.phpのコード内容を直接書いても同じですか？ newArray()への文字列の入力は分かりました。 とても分かりやすい説明でした。ありがとうございました。 よろしくお願いします。
- caitsith_goo
- ベストアンサー率59% (28/47)
このようにするとできます。 配列は自動生成すると楽です。あとはお好みで。。 <html> <head> <title>test</title> <script language="JavaScript"> <!--- function listChange() { var default_ary = new Array("自動で入れ替わります"); var name_text = new Array("鈴木", "佐藤", "田中"); var name_value = new Array("suzuki", "sato", "tanaka"); var data_text = new Array("2004年度", "2003年度", "2002年度"); var data_value = new Array("2004", "2003", "2002"); document.form.list2.length = 0; flag = document.form.list1.value; if (flag=="name") { document.form.list2.length = name_text.length; for(var i=0; i<name_text.length; i++) { document.form.list2.options[i].text = name_text[i]; document.form.list2.options[i].value = name_value[i]; } } if (flag=="date") { document.form.list2.length = data_text.length; for(var i=0; i<data_text.length; i++) { document.form.list2.options[i].text = data_text[i]; document.form.list2.options[i].value = data_value[i]; } } if (flag=="default") { document.form.list2.length = default_ary.length; for(var i=0; i<default_ary.length; i++) { document.form.list2.options[i].text = default_ary[i]; } } } //---> </script> </head> <body> <form name="form"> <select name="list1" onChange="listChange()"> <option value="default">検索項目</option> <option value="name">名前</option>); <option value="date">日付</option>); <option value="team">チーム</option>); </select> <select name="list2"> <option>自動で入れ替わります </select> </form> </body> </html>
お礼
ありがとうございます。 やろうとしていた動作通りに確認できました。 ただ、やはりjavascriptを使わなければ出来ないのでしょうか。 配列の部分はMySQLからデータを呼び出して書き込みます。 SQLで呼び出したデータをどのようにして Varname_value=newArray"suzuki", "sato", "tanaka"); にいれたらいいか分かりません。 教えていただけますか？お願いします。
お礼
いつも回答ありがとうございます。 JavaScriptの方ですが、<?php ?>の外で次のように記述していました。 回答いただいたソースと見比べて、<HEAD></HEAD>がないことに気が付きました。 <script language="JavaScript"> <!--- function listChange() { ・・・・ } //---> </script> また、リストボックスの変数取得の方ですが、リストボックス表示用と変数送信用のformを別々に２つ用意したためうまくいきませんでした。 回答のように１つのformのなかに入れたところ受けることが出来ました。 なんとか目的を達成できました。 何度も本当にありがとうございました。