• ベストアンサー

セレクトしたときに全て初期状態に戻ってしまいます。

こんにちは。 先日、こちらでご教授いただいた者です。 調べたのですが、その部分についてのいい方法が見つからなかったので、新たに質問させていただきました。 同一ページにテキストフォームと、 3つのセレクトボックスがあり、 その3つのセレクトボックスのうち、2つは連動しますが、残り一つは連動しないようにしたいのですが。 現状は、2つの連動するセレクトボックスを選ぶと 全てが初期状態（未選択の状態）になってしまいます。こちらでご教授いただいた方法を使い、 連動する部分で、onChangeイベントを使っています。 また連動する部分で、一つ目の選択肢を選んだときに、一度mysqlへ問い合わせ、2つ目の項目をmysqlからもってきて表示しています。 連動するセレクトボックスの操作をしたときに 他のテキストフォームや、セレクトボックスが初期状態に戻らないようにするには、どのように改良すればよろしいでしょうか？どうかご教授くださいませ。 よろしくお願いいたします。 WinXP mysql4.0 php4.2 Apache1.3

  • PHP
  • 回答数6
  • ありがとう数6

質問者が選んだベストアンサー

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 前の質問の回答見てみました。 セレクトを選択し、submitがかかり、DBより項目を選択して再描画していますが、 その時に前に選択された情報がselectedされるように書いてあるようです。 送信されているキー項目と表示している内容を確認してみてください。 ==この部分です。 $slctd = (($_POST['mkoumoku'] == $rows['id'])?" selected":""); echo '<option value="'.$rows['id'].'"'.$slctd.'>'.$rows['kind'].'</option>'."\n"; submitされた$_POST['mkoumoku']の内容がデータベースより取得したidと同じ場合（選択された項目ということ） selectedの文字列が出力されるようになっています。 また、テキストフィールドに関しては、 <input type="text" name="txt" value="<?= $_POST['txt'] ?>"> と言う感じで、受け取った内容をvalueにて初期値に設定することにより 入力された内容を保つことが出来ます。

bacon_001
質問者

お礼

早速のご回答ありがとうございますm(__)m 現状のソースを補足してみました。 ※ＤＢ接続部分は、省略しております。 <body> <script language="javascript"> function submit() { document.forms.submit() } </script> <br>名前を入力</br> <form action="result.php" method="post"> <input name="txt" type="text" value="<?=$_POST['txt']?>"> </form> <select name="nenrei"> <?php //table3を取得 echo '<option value="none" selected>-------------</option>'; $pro=mysql_query("select distinct * from table3"); while ($rows=mysql_fetch_array($pro)) { echo '<option value="'.$rows['id'].'">'.$rows['age']; } echo "</select>"; ?> <form method="post" action="a.php"> <select name="mkoumoku" onChange="submit()"> <?php if (! isset($_POST['mkoumoku']) Or $_POST['mkoumoku'] == "none") { echo '<option value="none" selected>-------------</option>'; } else { echo '<option value="none">-------------</option>'; } //table1をDBから取得 $res=mysql_query("select distinct * from table1"); while ($rows=mysql_fetch_array($res)) { if ($_POST['mkoumoku'] == $rows['id']) { echo '<option value="'.$rows['id'].'" selected>'.$rows['kind']; else { echo '<option value="'.$rows['id'].'">'.$rows['kind']; } echo "</select>"; } ?> <br> <br>table2を選択</br> <select name="skoumoku"> <option selected>-------------</option> <?php $res1=mysql_query("select * from table2 where table2.key=".$_POST['mkoumoku']." order by id"); while ($rows=mysql_fetch_array($res1)) { echo '<option value="'.$rows['id'].'">'.$rows['name']; } echo "</select>"; mysql_close($dbcon); ?> </body>

その他の回答 (5)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.6

#5の補足 HTMLとjavascriptとPHPの部分が分かれてて わかりやすいと思うんですけど、だめですか？ <?PHP if($_POST['regist']=="1"){ //登録処理 }else{ //処理部分 DB処理省略 //年齢テーブルの検索 $res=mysql_query("select distinct * from table3"); while ($rows=mysql_fetch_array($res)) { $flg=(($_POST['nenrei']==$rows['id'])?"selected":""); $select_nenrei.=<<<eof <option value="{$rows[id]}" $flg>{$rows[age]}</option> eof; } //種類テーブルの検索 $res=mysql_query("select distinct * from table1"); while ($rows=mysql_fetch_array($res)) { $flg=(($_POST['mkoumoku']==$rows['id'])?"selected":""); $select_mkoumoku.=<<<eof <option value="{$rows[id]}" $flg>{$rows[kind]}</option> eof; } //名前テーブルの検索 $res=mysql_query("select * from table2 where table2.key='{$_POST[mkoumoku]}' order by id"); while ($rows=mysql_fetch_array($res)) { $flg=(($_POST['skoumoku']==$rows['id'])?"selected":""); $select_skoumoku.=<<<eof <option value="{$rows[id]}" $flg>{$rows[name]}</option> eof; } mysql_close($dbcon); //HTML表示部分 print <<<eof <body> <form action="$PHP_SELF" method="post"> <input name="regist" type="checkbox" value="1">登録する<br> 名前：<input name="txt" type="text" value="{$_POST[txt]}"><br> 年齢：<select name="nenrei"> <option value="">-------------</option> $select_nenrei </select><br> <select name="mkoumoku" onChange="this.form.submit()"> <option value="">-------------</option> $select_mkoumoku </select><br> table2を選択<br> <select name="skoumoku"> <option value="">-------------</option> $select_skoumoku </select><br> <input type="submit" value="実行"> </form> </body> eof; } ?>

bacon_001
質問者

お礼

お礼が遅くなり申し訳ありません。 無事解決いたしました。 ありがとうございました！

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.5

formのactionを変える方法は推奨しません。 javascriptを前提とした仕組みは破綻をきたします。 絶対後悔するのでそんな書き方はやめましょう。 この場合クリアしたくないものは全て同じフォームで 処理します。連動するしないは関係ありません。 それと前回も書きましたが、処理部分と表示部分は確実に 分けましょう。 で、どうやって登録する場合としない場合を分けるかですが 基本的にはチェックボックスなどでやるともっともわかり やすいでしょう。（セレクトでもラジオボタンでも同じ） 以下の例だとregistに1がある場合は、受けたphpで、 「あ、これは登録データなんだな」というように解釈して 分岐をいれるのです。 フォーム自体に分岐処理をいれるのは賢い選択とは いえません。 <form> <input type="txt" type="text"><br> <input type="checkbox" value="1" name="regist">登録する<br> <select name="nenrei"> <option>・・・ </select><br> <select name="mkoumoku" onChange="this.form.submit()"> <option>・・・ </select><br> <select name="skoumoku"> <option>・・・ </select><br> <input type="submit" value="実行"> </form> javascriptを使うときはform[0]などの表記は最後の手段です。 拡張性がまったくなくなります。 基本的にはthisでオブジェクトを受け渡すように心掛けて ください。

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.4

こんにちは。 途中で切れちゃっているようですが予想した範囲で回答します。 <script language="javascript"> function selChange() { document.forms[0].action="a.php"; //a.phpは、入力フォームがあるページ } function submit() { document.forms[0].submit(); } </script> と、されたようですが document.forms[0].action="入力ページ.php"; // 送信実行 document.forms[0].submit(); この二つの設定は、onChangeで呼ばれる（すなわちselChange()） に書きます。 function selChange () { document.forms[0].action="a.php"; document.forms[0].submit(); } 動きを言葉で追ってみると、 セレクト項目が変更されてselChange()が呼び出されます。 document.forms[0].action="a.php"; とすることにより、HTML内にある一つ目のフォームの送信先をa.phpに設定します。 document.forms[0].submit(); HTML内にある一つ目のフォームを送信します。 送信内容をa.phpが取得し、それを元にDBよりセレクトボックスに必要な値を取得して同じ画面をもう一度描画します。 *余談ですが、document.forms[1]とすると、HTMLにある二つ目のフォームになります。（今は存在していないはずです） <form action="result.php" name="result" method="post"> </form> <form action="result.php" name="result_2" method="post"> </form> とフォームがあった場合は document.forms[0]とdocument.resultが同じ物 document.forms[1]とdocument.result_2が同じ物 という感じになります。

bacon_001
質問者

お礼

お礼が遅くなり申し訳ありません。 無事解決いたしました。 ありがとうございました(*^_^*)

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.3

こんにちは。 最終的には全項目の値を使ってDBなりに登録することになりますよね？ その場合は、<form>から</form>に使いたい値を全て入れる必要があります。 No2さんの言う通り、別のフォームに選択項目は置いておいて、最終的にsubmitするときに その値を使用するということも可能ですが。 <form action="result.php" method="post"> <input name="txt" type="text" value="<?=$_POST['txt']?>"> <select name="nenrei"> // 割愛 </select> <br> <select name="mkoumoku" onChange="selChange();"> // 割愛 </select> <br> <select name="skoumoku"> // 割愛 </select> <input type="submit" value="登録"> </form> という形にしないと、result.phpに送信されるのはtextだけになってしまいます。 また、入力画面と登録実行が別ファイルにて作られている場合は onChangeで呼び出されるJavaScriptの関数に以下の設定が必要になります。 // formのaction先を自URLに変更します // なぜなら変更しない場合はresult.phpに飛んでしまうため // onChangeで呼ばれた際は、登録ではなくセレクトの中身を取得して再描画するため document.forms[0].action="入力ページ.php"; // 送信実行 document.forms[0].submit(); こういう風にすることにより、onChangeにて項目を変更した場合は、自分のページにデータが送信され、 その情報のキーを使用して、skoumokuの内容を取得し、また入力画面を表示します。 選択や入力が終了し、登録ボタンを押した際は、result.phpに選択・入力内容が送信されます。 同じファイル内で登録を行う際は上の設定はいりませんが、 onChangeでsubmitされたのか登録ボタンを押されたのかの判別を行い、登録を実行する・しないの判別が必要となります。 また、formを二つにする際は入れ子にならないように注意して下さい。 <form action="aaa.php" method="post"> <form action="bbb.php" method="post"> </form> </form> これは出来ません。 わからないことがあったら補足してください。

bacon_001
質問者

補足

こんにちは。 丁寧な説明をありがとうございますm(__)m <form>の件、分かりました。 あと、入れ子は気をつけます。 いっぱいでてくると、更にこんがらがってしまうので・・・。 LancerVII様が言うように、 全ての項目を入力、選択した後、 最終的に、ＤＢに登録して表示させる予定です。 なので、登録画面へはresult.phpにへ飛ぶときに ＤＢへ登録、その後、そこへ表示したいと思います。 なので、LancerVIIさんがおっしゃるように、 呼び出してるJSに追加が必要になりました。 また、そこでＪＳの質問があるのですが、 今、私のコードに、以下のように付け足してみたのですが・・・。 <script language="javascript"> function selChange() { document.forms[0].action="a.php"; //a.phpは、入力フォームがあるページ } function submit() { document.forms[0].submit(); } </script>

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

どういうソースにまとめたかわからないので なんともいえませんが。 おそらく連動するフォームと、連動しないフォールを 別のフォームにしたんじゃないですか？ おなじフォームにしないといけませんよ 最悪フォームをわけるのであれば、hiddenで もう片方のデータを格納してやる必要があります。 どちらかというと前者がおすすめ。 私が例示したように処理部と表示部をわけました？ バグった場合は視認性が悪いとどこをどうなおして いいかわからなくなりますよ。

bacon_001
質問者

お礼

再びお世話になります。 ご回答ありがとうございますm(__)m 参考にさせてもらって、コードをまとめてみたのですが、連動するフォームと、しないフォームを一緒のにするのですか？ ということは、大きく<form>タグで囲むという ことでしょうか？ 質問に質問を重ねてしまい申し訳ないです・・・。 確かに、バグった場合さらに混乱してしまいます。。 また自分のコードをみると、すごいコメントも一杯入っていて見難いです（反省）・・。 No.1さんのお礼のところに 現状ソースを載せてみました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. PHP

関連するQ&A

  • mysqlからのコンボボックスについて教えてください

    はじめまして。 mysql+php初心者の者ですが、 ご教授をよろしくお願いいたします。 [table 1] id　 種類 ---------- 1 野菜 2　 果物 3　 麺 [table 2] id　 　key 　　名前 ---------------------- 1 　1 にんじん 2　 　1 たまねぎ 3　　　1　　 ほうれん草 4 　2 りんご 5　　　2　　 バナナ 6 　3 うどん 7　　　3　　 ラーメン [table 1]のid　と、[table 2]のkeyが 対応するように、連動したコンボボックスを作りたいと思って頑張っています。 コンボボックス1には、[table 1]の、種類が入り コンボボックス2には、[table 1]の種類に連動して、[table 2]の名前が選択できるように したいと思っています。 たとえば、コンボボックス1で「果物」を選択した場合、 コンボボックス2では、「りんご」「バナナ」がコンボボックスに 表示されて選べるようになるようにするです。 単純に、mysqlからセレクトフォームに表示することはできましたが、 連動がどうやればいいのか、色々調べましたが 力不足で分かりませんでした。 コンボボックスを連動させるために、[table2]に「key」のフィールドを加えたので、 改良しようと思っております。 ご教授をよろしくお願いいたします。 環境 ------- WindowsXP mysql4.0 php4.2 Apache1.3

    • ベストアンサー
    • PHP
  • 複数の連動するセレクトボックスについて。

    こんにちは。 以前もこちらでPHP＋mysqlについて質問させていただきました。 今、複数（3つ）の連動するセレクトボックスを作成しているのですが、一つ目と2つ目は正常にDBから値を読み込んできて、各セレクトボックスが連動することが可能となりましたが、3つ目のセレクトボックスの 初期値の値が、2つ目のセレクトボックスの値をDBへ問い合わせて変えない限り、そのまま残ってしまいます。どうすれば3つのセレクトボックスが連動するように解決するのでしょうか？？ よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • 複数の連動する同じ内容のセレクトボックスについて

    こんばんわ。 よろしくお願いします。 複数の同じ内容のセレクトボックスが連動するモノを作りたいのですが、まったく解りません。 たとえば 初期値を『選択しない』とし、１～５までの値を選択出来るセレクトボックスが５つあるとします。 １つ目のセレクトボックスで『３』を選択したら、残りのセレクトボックスでは３を除いた１～５までの値を選択出来ます。 さらに２つ目のセレクトボックスで『２』を選択したら、残りのセレクトボックスでは２と３を除いた１～５までの値を選択出来きるといった、全てのセレクトボックスが連動した重複を許さないセレクトボックスを作りたいのですが、可能でしょうか？

  • セレクトボックスの初期選択状態(SELECTED)を動的にしたいのですが

    モーダル内に表示させるセレクトボックスで、毎回モーダル起動時ごとに、 セレクトボックス内の初期選択状態を変えたいと思っています。 １回目のモーダル起動時には本日の日付をSELECTEDにし、２回目以降は 前回のモーダル起動時に選択した値をSELECTEDにしたいと思っております。 いろいろな方法があると思うのですが(てっとりばやく、フラグを持たせる とか、クッキーを使うとか・・・)、正しく実行されず、困っています。 どなたか、よいアドバイスをください。お願いいたします。

  • Ajaxで加工したページの初期化について

    ページ上にテキストボックスやセレクトボックスがたくさんあります。 セレクトボックスAで選択した値に基づいて、セレクトボックスBやテキストボックスに一つの値を表示しています（セレクトボックスは選択不可状態になる）。 セレクトボックスAで選択しないときは、セレクトボックスBには予め選択肢が入っています。 セレクトボックスAで選択して、セレクトボックスBにデータを表示した後、 リセットボタンを押したらセレクトボックスBは初期状態の予め選択肢が入っている状態に戻したいです。 そして、セレクトボックスCには、別の選択肢を入れ直したいです。 このようなセレクトボックス、テキストボックスともに何十個もあるので、出来たら一括で初期状態に戻し、その後、セレクトボックスの選択肢の変更などのAjax加工をしたいと思っています。 ページのツールバーのページ更新ボタンを押すと、ページがリロードされて、初期化されるので、 window.location.reload(); と設定した後、さらにAjaxでセレクトボックスなどの変更をするプログラムを組んだのですが、 window.location.reload(); この後の処理が動いてくれません。 ページをリロードすると、その後の処理が無効？になってしまうのでしょうか。 一つずつセレクトボックスやテキストボックスのデータを削除して、さらに値をセットしてというのが効率が悪い気がして、 ページリロードのように、ページを初期化した後、必要なセレクトボックスやテキストボックスだけAjax処理をしたいなあと思うのですが、どのようにするのがいいのでしょうか。 効率のいいやり方をご存じの方がいらっしゃいましたらぜひ教えてください。 分かりづらいと思いますので、分からない点はご質問頂けたらと思います。 よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • セレクトボックス ＨＴＭＬ javascript

    セレクトボックス ＨＴＭＬ javascript php セレクトボックスの複数選択についてですがご教授よろしくお願いいたします。たとえばセレクトボックスを二つ作り 一つ目のセレクトボックスを ・フルーツ ・寿司 ・カレー フルーツを選択すると二つ目のセレクトボックスの中が ・りんご ・みかん ・なし 寿司を選択すると二つ目のセレクトボックスが ・いくら ・まぐろ ・うに このように 一つ目のセレクトボックスの選択によって 二つ目のセレクトボックスの中身を変えるにはどのようなコードを組めば よろしいのでしょうか。 現在 php javascript mysqlの勉強しています。 ご教授いただければ幸いです。

    • ベストアンサー
    • HTML
  • 連動させたいセレクトボックスについて。

    こんにちは。DB＋PHPが初心者のものです。 前にもここで質問させていただきましたが、 自分なりにコードを書いてみたので コードの訂正、ご教授をよろしくお願いいたします。 セレクトボックス1には、[table 1]の、種類が入り れレクトボックス2には、[table 1]の種類に連動して、[table 2]の名前が選択できるようにする。 下記のようにソースを書いてみましたが、 table１の値は、セレクトボックスでちゃんと表示されますが、table2はセレクトボックスは表示されるものの、何も値がありません(T_T) 動きとしては、table1のセレクトボックスで選択したら、その項目をDBへ問い合わせ、その項目に対応した、DBに登録されているtable2の値を二つ目のセレクトボックスに表示させたいです。 <html> <body> <select name="mkoumoku"> <option selected>-------------</option> <?php //DB接続 $dbcon=mysql_connect("localhost","abcd","defg"); //DB選択 mysql_select_db("zozozo"); //table1を取得 $res=mysql_query("select distinct * from table1"); while ($rows=mysql_fetch_array($res)) { echo "<option value=\"".$rows['id']."\">".$rows['kind']."\n"; } echo "</select>"; ?> <select name="skoumoku"> <option selected>-------------</option> <? //table1に連動して項目を変えたいところのコード $res1=mysql_query("select * from table2 where key =$_POST[mkoumoku] order by id"); while ($rows=mysql_fetch_array($res1)) { echo "<option value=\"".$rows['id']."\">".$rows['name']."\n"; } //Dbクローズ mysql_close($dbcon); ?> </body> </html>

    • ベストアンサー
    • PHP
  • POSTでセレクトフォームの値を渡す

    こんにちは。初めて質問させていただきます。 過去ログを検索して似たような内容の投稿は読んだのですが、どうにも自分がやりたいことへの応用が利かないため投稿させていただきました。環境はPHP4.3.2 DBはMYSQLを使用しています。 やろうとしていることは、入力フォーム上（index.phpとします）で任意（セレクトフォーム）でテーブルを選択し、その選択したテーブルにセレクトフォームの下にあるテキストフォームの値を挿入しようと考えています。 引っかかっている部分はセレクトの値の部分です。（テキストの方はテーブルを固定すると問題なかったので省略します） <<index.php>> <form action="inputdata.php" method="post"> <select name="dblist"> <? $mysql = mysql_connect(SERVER,USER,PASS) or die ("MYSQLに接続できませんでした\n"); mysql_select_db(DB,$mysql) or die ("データベースの接続に失敗しました\n"); $dbresult = mysql_query("SELECT * FROM listtable", $mysql); while($row = mysql_fetch_assoc($dbresult)){ echo "<option value='{$row['list_tb']}'>{$row['list_name']}"; } mysql_close($mysql); ?> </select> //これより下にテキストが入りますが省略します </form> 上記のような渡し方の場合、受け取る側(inputdata.php)を $table = $_POST['dblist']; と書いているのですが、echoで$tableを表示してもなにも表示されませんでした。（nullでした） 受け取り側(inputdata.php）の書き方が悪いのでしょうか？それともそもそもの渡し方（index.php)が悪いのでしょうか？ 基礎的なことかもしれないのですが、適切な受け渡し方法があれば教えてください。よろしくお願いします。

    • ベストアンサー
    • PHP
  • mysql+phpでコンボボックスの連動方法

    *********************************************************** 以前の質問がわかりやすい書き方でしたので、お借りしています。 追加で質問したいのでそのまま引用させてもらいました。 *********************************************************** 以前の回答ではjavaが使われていましたが、mysql+phpのみで 完成させたい場合の方法を教えてください。 また、選択した２つのリストの結果をＤＢに書き込む方法も 教えてください。 *********************************************************** [table 1] id　 種類 ---------- 1 野菜 2　 果物 3　 麺 [table 2] id　 　key 　　名前 ---------------------- 1 　1 にんじん 2　 　1 たまねぎ 3　　　1　　 ほうれん草 4 　2 りんご 5　　　2　　 バナナ 6 　3 うどん 7　　　3　　 ラーメン [table 1]のid　と、[table 2]のkeyが 対応するように、連動したコンボボックスを作りたいと思って頑張っています。 コンボボックス1には、[table 1]の、種類が入り コンボボックス2には、[table 1]の種類に連動して、[table 2]の名前が選択できるように したいと思っています。 たとえば、コンボボックス1で「果物」を選択した場合、 コンボボックス2では、「りんご」「バナナ」がコンボボックスに 表示されて選べるようになるようにするです。 単純に、mysqlからセレクトフォームに表示することはできましたが、 連動がどうやればいいのか、色々調べましたが 力不足で分かりませんでした。 コンボボックスを連動させるために、[table2]に「key」のフィールドを加えたので、 改良しようと思っております。 ご教授をよろしくお願いいたします。

    • 締切済み
    • PHP
  • selectの初期値を設定したい

    いつもお世話になります。 javascriptにて、ページを開くと、 セレクトボックスの値が、初期値になるようにしようと思ってますがうまくいきません。 詳しく書きますと、担当者一覧がセレクトボックスに入っていて、 そのページを開くと、ログインしている担当者名が選ばれた状態にしたいのです。 ※たとえば、「山本太郎」でログインしているとすると、ページを開くとセレクトボックスが、 　「山本太郎」が選ばれている状態にしたいのです。 いろいろ調べて、自分なりにソースを書いてみましたが、うまくいきません。 以下ソースになります。 <SCRIPT LANGUAGE="JavaScript" > var tantou = "<%=Rs("作業担当者")%>" var element = document.getElementById("sagyounm"); for (var i=0; i<element.options.length;i++) { if(element.options[i] === 'tantou'){ element.options[i].selected = true; break; }; }; </SCRIPT> Rs("作業担当者")は、ログインした担当者名です。 たぶん上記のソースはセレクトが選ばれている値を取得してるだけだと思います。 *********************************************** 以下は、セレクト部分です。 <select name="sagyoutantou" id="sagyounm" required> <option value=""/>---作業担当者選択---</option> <option value="山本　太郎"/>山本　太郎</option> <option value="山下　清"/>山下　清</option> <option value="岡本　次郎"/>岡本　次郎</option> どうにか、初期状態から担当者が選ばれている状態にできないでしょうか。 お忙しいとは思いますが、 おわかりの方いらっしゃいましたら、 どうかご教授お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する