dポイントプレゼントキャンペーン実施中！

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

解決済

  • 質問者：bacon_001
  • 質問日時：
  • 回答数：6件

こんにちは。

先日、こちらでご教授いただいた者です。
調べたのですが、その部分についてのいい方法が見つからなかったので、新たに質問させていただきました。

同一ページにテキストフォームと、
3つのセレクトボックスがあり、
その3つのセレクトボックスのうち、2つは連動しますが、残り一つは連動しないようにしたいのですが。

現状は、2つの連動するセレクトボックスを選ぶと
全てが初期状態（未選択の状態）になってしまいます。こちらでご教授いただいた方法を使い、
連動する部分で、onChangeイベントを使っています。
また連動する部分で、一つ目の選択肢を選んだときに、一度mysqlへ問い合わせ、2つ目の項目をmysqlからもってきて表示しています。

連動するセレクトボックスの操作をしたときに
他のテキストフォームや、セレクトボックスが初期状態に戻らないようにするには、どのように改良すればよろしいでしょうか？どうかご教授くださいませ。

よろしくお願いいたします。

WinXP
mysql4.0
php4.2
Apache1.3

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.1ベストアンサー

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



前の質問の回答見てみました。
セレクトを選択し、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にて初期値に設定することにより
入力された内容を保つことが出来ます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速のご回答ありがとうございます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>

通報する
お礼日時：2006/03/03 16:24

No.6

  • 回答者： yambejp
  • 回答日時：

#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;
}
?>
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなり申し訳ありません。

無事解決いたしました。
ありがとうございました！

通報する
お礼日時：2006/03/18 12:48

No.5

  • 回答者： yambejp
  • 回答日時：

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でオブジェクトを受け渡すように心掛けて
ください。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



途中で切れちゃっているようですが予想した範囲で回答します。

<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が同じ物
という感じになります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/03/18 12:45

No.3

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



最終的には全項目の値を使って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>
これは出来ません。

わからないことがあったら補足してください。

この回答への補足

こんにちは。
丁寧な説明をありがとうございます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>

補足日時：2006/03/03 17:40
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yambejp
  • 回答日時：

どういうソースにまとめたかわからないので


なんともいえませんが。
おそらく連動するフォームと、連動しないフォールを
別のフォームにしたんじゃないですか？
おなじフォームにしないといけませんよ

最悪フォームをわけるのであれば、hiddenで
もう片方のデータを格納してやる必要があります。
どちらかというと前者がおすすめ。

私が例示したように処理部と表示部をわけました？
バグった場合は視認性が悪いとどこをどうなおして
いいかわからなくなりますよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

再びお世話になります。
ご回答ありがとうございますm(__)m

参考にさせてもらって、コードをまとめてみたのですが、連動するフォームと、しないフォームを一緒のにするのですか？
ということは、大きく<form>タグで囲むという
ことでしょうか？

質問に質問を重ねてしまい申し訳ないです・・・。
確かに、バグった場合さらに混乱してしまいます。。
また自分のコードをみると、すごいコメントも一杯入っていて見難いです（反省）・・。

No.1さんのお礼のところに
現状ソースを載せてみました。

通報する
お礼日時：2006/03/03 16:29

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報