Q&A
.html内にPHP書かれてますが、そういう設定をしているということで良いでしょうか？
###前提・実現したいこと
WEBページにてエントリーフォームを作成しております。
base.html（エントリー画面）
base_ck.php（確認画面）
Aプルダウン（都道府県）
Bプルダウン（所属名）
MySQLよりPHPで先にBプルダウンの値を計算しておきます。
Aプルダウンを選択したのち、Aのvalue値をキーとしてBプルダウンの値を計算（javascript）しております。
例）Aプルダウン：北海道（value値：11）
Bプルダウン：北海道倶楽部（value値：1002）
ここまでは問題ないのですが、確認画面から戻る（submit）と、Aプルダウンは”北海道”と表示が残っていますが、Bプルダウンの値が消えて選択もできなくなります。又、Aプルダウンの値そのものはクリア（value値：0）されてしまっております。
今までは運用でごまかしておりましたが（Aプルダウンで一旦違う値を選択し再度選びなおすとBプルダウンが復活する）、
クライアントより修正依頼がきてしまい、値を保持しなければならなくなりました。
PHP・HTMLは何とか書けるのですが、JavaScriptはど素人で、このプログラムもネットから情報を拾い集めて何とかできました。
ご教授いただければ幸いです。
###該当のソースコード
「base.html（エントリー画面）」 <html lang="ja"> <head> <title>テストページ</title> <script type="text/javascript"> <!-- データベースよりJavaScriptにて「所属名」を配列に格納する belong_value = new Array(); belong_text = new Array(); belong_length = new Array(); <?php //ここでBプルダウンの値を計算して配列に格納する。 //データサンプル //belong_value[11] = new Array("0","1001","1002","1003"); //belong_length[11] = 3; //belong_text[11] = new Array("---","北海道","北海道倶楽部","札幌クラブ"); ?> function BelongList(idx){ //選択リストに項目を追加 for(i=0;i<belong_length[idx];i++){ document.form_kojin.belong.length=belong_length[idx]; document.form_kojin.belong.options[i].text = belong_text[idx][i]; document.form_kojin.belong.options[i].value= belong_value[idx][i]; } //選択リストがブランクの場合 if(i==0){ document.form_kojin.belong.length=1; document.form_kojin.belong.options[i].text = "---"; document.form_kojin.belong.options[i].value= 0; } } //--> </script> </head> <body> <div id="wrapper"> <div id="main"> <h1>申込ページ</h1><br /> <?php $action_ck = "https://aaa/base_ck.php"; ?> <h2></h2> <div class="main-frame"> <p><span class="style-indispensable">※必須項目</span></p><br /> <form name="form_kojin" action="<?php echo htmlspecialchars($action_ck, ENT_QUOTES); ?>" method="post"> <table> <tr> <th class="th-style"> <div><span class="style-indispensable">※</span>都道府県</div> </th> <td class="td-style"> <SELECT autofocus size="1" name="branch_name" id="branch_name" onChange="BelongList(this.options[selectedIndex].value);"> <OPTION value="0">---</OPTION> <OPTION value="11">北海道</OPTION> <OPTION value="21">青森県</OPTION> <OPTION value="22">岩手県</OPTION> </SELECT> </td> </tr> <tr> <th class="th-style"> <div><span class="style-indispensable">※</span>所属名</div> </th> <td class="td-style"> <SELECT size="1" name="belong" id="belong"><!-- BelongList関数より自動生成 --> <OPTION value="0">---</OPTION> </SELECT> </td> </tr> </table> <br /><br /> <div> <input name="submit" type="submit" value=" 入力確認画面へ " class="button-05"> </div> </form> </div> </div> </div> </body> </html>
###試したこと
他のQ＆Aサイトで教えていただいた以下の内容等を試しましたが、何の反応もありません。
BelongList() 関数を定義した後に
var num = document.form_kojin.branch_name.selectedIndex;
BelongList(document.form_kojin.branch_name.options[num].value);
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
ご連絡ありがとうございます。返信が遅くなり大変申し訳ございません。.htaccess に「AddHandler x-httpd-php5.3 .php .phps .html」の記述をしております。何卒宜しくお願い申し上げます。
北海道と表示されているにもかかわらず0というのが解せないのですが、都道府県もスクリプトにより生成しているのでしょうか？
ご連絡ありがとうございます。上記サンプルコード上ではhtmlで書いておりますが、実際はMySQLのテーブルからPHPを利用してデータを取得しております。クリア（value値：0）される流れは、①エントリー画面より確認画面へ移動②確認画面よりbuttonで戻る③上記現象④その状態で再度確認画面へ移動⑤テスト的にPOST値を確認すると”０”となる。この辺りが問題点でしょうか。
"0"を確認しているのは、確認画面のさらに先ということですか？ 確認画面は提示されていないため、これだけでは難しいかもしれません。
すみません。私の確認間違いでした。しっかりと、都道府県のvalue値はpostされておりました。ご指摘頂きありがとうございました。
回答2件
0
他の方の回答のコメントをみると、確認画面 → エントリーフォームへ戻る場合ははhistory.back()で戻っているのですね。。。既に他の方の回答コメントに書いてありますように、**history.back()**ではやりたいことを実装することはできません。（一部のブラウザでは実現できません）
質問文を編集するか追記しておいたほうが良いと思います。
確実に実現するには、確認画面 → エントリーフォームへ戻るときも、既にPOSTされている値をPOSTするようにすればよいです。確認画面から完了画面でPOSTしているのであれば、同じロジックを使いまわしできると思います。どうしてもPOSTしたくない場合は、セッションを使います。しかし、こちらのほうがセッションをクリアするタイミングを考慮しなければならないので面倒です。
確認画面
php
1<input name="back" type="button" onClick="history_back();" value=" 入力画面へ戻る "> 2 3<script type="text/javascript"> 4function history_back() 5{ 6 var form = document.createElement('form'); 7 form.action = '/base.html'; 8 form.method = 'post'; 9 document.body.appendChild(form); 10 11 //セレクトボックスA 12 var branch_name = document.createElement('input'); 13 branch_name.type = 'hidden'; 14 branch_name.name = 'branch_name'; 15 branch_name.value = <?php echo $branch_name; //セレクトボックスA ?>; 16 form.appendChild(branch_name); 17 18 //セレクトボックスB 19 var belong = document.createElement('input'); 20 belong.type = 'hidden'; 21 belong.name = 'belong'; 22 belong.value = <?php echo $belong; //セレクトボックスB ?>; 23 form.appendChild(belong); 24 25 form.submit(); 26} 27</script>
**セレクトボックスB（belong）が生成されるタイミングは、セレクトボックスAの値を変更（onChange）**したときのみなので、確認画面から戻ると消えてしまいます。
これを防ぐには、セレクトボックスAが既に選択状態（確認画面から戻ってきた場合）の時にもセレクトボックスBを生成するJavaScript関数BelongList()を実行しなければなりません。
エントリー画面 - セレクトボックスA
確認画面からPOSTした値を取得して、セレクトボックスをPHPで選択状態にします。
php
1<SELECT autofocus size="1" name="branch_name" id="branch_name" onChange="BelongList(this.options[selectedIndex].value);"> 2<?php 3 4$sql = "select ID,branch_name from t_branch order by ID"; 5$rs = mysql_query($sql); 6 7//↓↓追加↓↓ 8//セレクトボックスAのPOST値取得（確認画面から戻った場合） 9$branch_post = (int)filter_input(INPUT_POST, 'branch_name', FILTER_SANITIZE_NUMBER_INT); 10 11while($row=mysql_fetch_array($rs)){ 12 //↓↓追加↓↓ 13 $selected = $posted_branch === $row["ID"] ? ' selected="selected"' : ''; 14 print("<OPTION value=". $row["ID"] . $selected .">". $row["branch_name"] . "</OPTION>\n"); 15} 16 17?> 18</SELECT>
エントリー画面 - JavaScript
セレクトボックスAが、表示時に選択状態にあるか確認してBelongList()を実行するJavaScriptコードを追加します。
js
1//データベースよりJavaScriptにて「所属名」を配列に格納する 2belong_value = new Array(); 3belong_text = new Array(); 4belong_length = new Array(); 5 6<?php 7//ここでBプルダウンの値を計算して配列に格納する。 8//データサンプル 9//belong_value[11] = new Array("0","1001","1002","1003"); 10//belong_length[11] = 3; 11//belong_text[11] = new Array("---","北海道","北海道倶楽部","札幌クラブ"); 12?> 13 14//↓↓追加↓↓ 15 16//セレクトボックスA値 17var posted_branch_name = parseInt(document.form_kojin.branch_name.value); 18if (selected > 0) { 19 BelongList(posted_branch_name); 20} 21 22//セレクトボックスB値 23var posted_belong = <?php echo ($val = filter_input(INPUT_POST, 'belong', FILTER_SANITIZE_NUMBER_INT)) ? $val : 0; ?>; 24 25//↑↑ここまで↑↑ 26 27function BelongList(idx){ 28 //選択リストに項目を追加 29 for(i=0;i<belong_length[idx];i++){ 30 document.form_kojin.belong.length=belong_length[idx]; 31 document.form_kojin.belong.options[i].text = belong_text[idx][i]; 32 document.form_kojin.belong.options[i].value= belong_value[idx][i]; 33 34 //↓↓追加↓↓ 35 if (posted_belong == belong_value[idx][i]) { 36 document.form_kojin.belong.options[i].selected = true; 37 } 38 } 39 //選択リストがブランクの場合 40 if(i==0){ 41 document.form_kojin.belong.length=1; 42 document.form_kojin.belong.options[i].text = "---"; 43 document.form_kojin.belong.options[i].value= 0; 44 } 45}
投稿2017/12/20 13:31
編集2017/12/21 12:47
総合スコア1652
To: Tomakさん
ご丁寧にご教授頂き誠にありがとうございます。
またご説明不足で申し訳ございません。
まずセレクトボックスA（都道府県）につきましては、MySQLのテーブルからPHPを利用して都道府県47データを取得し、表示しております。
<?php
$sql = "select ID,branch_name from t_branch order by ID";
$rs = mysql_query($sql);
while($row=mysql_fetch_array($rs)){
print("<OPTION value=". $row["ID"] . ">". $row["branch_name"] . "</OPTION>\n");
}
?>
そしてご質問です。
教えていただきました、以下の構文はセレクトボックスB（所属名）を生成するコードではないでしょうか。
//ブランチセレクトボックスのPOST値取得（確認画面から戻った場合）
$branch_post = (int)filter_input(INPUT_POST, 'branch_name', FILTER_SANITIZE_NUMBER_INT);
$branch_option = '';
foreach ($belong_text as $idx => $label) {
$selected = $branch_post === $belong_value[$idx] ? ' selected' : '';
$branch_option .= '<OPTION value="'.$belong_value[$idx].'"'.$selected.'>'.$label.'</OPTION>'."\n";
}
上記コードを追記すると、セレクトボックスBが生成できなくなりました。
また$branch_optionをセレクトボックスA（都道府県）の表示項目にすると反応しませんでした。
私の理解不足で御足労をお掛け致します。
一度ご確認頂けましたら幸甚です。
他の方の回答のコメントに、確認画面 → エントリーフォームへ戻る場合にPOSTではなく「history.back()」しているとあったので、回答を全般的に編集しました。また、セレクトボックスBの選択値の復元用のコードが抜けていたので、追加しておきました。
実際にコードは動かしていないので不具合があるかもしれません。
0
【ヘルプ｜teratail（テラテイル）】
https://teratail.com/help#posted-otherservice
teratailでは、マルチポスト*の推奨はしていません。
やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。
他のQ＆Aサイトで教えていただいた以下の内容等を試しましたが、何の反応もありません。
DOMの読み込み前に実行しているからです。scriptタグを</body>直前に移動してみてください。
投稿2017/12/11 18:08
編集2017/12/12 10:23
総合スコア69625
ご連絡頂きありがとうございます。
大変申し訳ないのですが、教えていただきました内容がよく理解できませんでした。
<script>から</script>までのコードを、<body>タグの直前に移動しましたが改善されません。
そもそも私の理解不足かと思います。
DOMとは？から調べてみているところです。
引き続き自力で解決できるように努力致しますが、お時間がございましたら、どのコードをどの位置へ移動すればいいのか、もう少し詳しく教えていただけないでしょうか。
レベルが低すぎで申し訳ございません。
何卒宜しくお願い申し上げます。
まったく読んでませんが、</body>の直前ですかね？
<body>の直前ということはありえないので
To: x_xさん
補足ありがとうございます。「</body>」と書いたつもりでした･･･。修正しておきます。
To: jipang5054さん
上記の通りです。
To: x_xさん
To: keiさん
お忙しい中ご指摘頂き大変ありがとうございます。
<head>内の<script>から</script>までの全てのコードを、</body>タグの直前に移動しましたが改善されません。（修正方法としてはこの理解で宜しいでしょうか。）
ちなみに、確認画面から戻る方法はsubmitではなくbuttonでした。
以下、コードです。
<input name="back" type="button" onClick="history.back();" value=" 入力画面へ戻る ">
間違いがあればご指摘いただければと思います。
何卒宜しくお願い申し上げます。
num の値が取れているか確認してみてください。あと、history.back()で戻る場合の挙動はブラウザによって違ったと思います。（前の値がきちんと残ったり残らなかったり不安定だった気がします）
ご連絡が遅くなりすみませんでした。「試したこと」で書いてあるコードをすっかり忘れておりました。
BelongList() 関数を定義した後に、該当の２行を挿入しました。
Aプルダウン・Bプルダウンと選択し、確認画面へ移動し、戻るボタンでエントリー画面へ戻ると、ブラウザによって以下の結果となりました。
＜safari/firefox＞
A・Bが選択された状態になりました。（まさしく解決された状態）
<Chrome>
Aは選択された状態で、Bは、Aをキーとした選択肢（例："北海道","北海道倶楽部","札幌クラブ"）が表示され選べるようになりました。（ここまででも大変な進歩です）
＜IE＞
変化なし（Bプルダウンに何も表示されない）
ご指摘のとおり、history.back()で戻る挙動の差なのでしょうか。
ちなみに以下３つの方法で確認画面から「戻る」動きを試しました。
<input name="back" type="button" onClick="history.back();" value=" 入力画面へ戻る ">
<a href="#" onClick="history.back(); return false;">入力画面へ戻る</a>
<button type="button" onClick="history.back()">入力画面へ戻る</button>
この不安定な状況を安定させる方法がございましたら教えてください。
何卒宜しくお願い申し上げます。
デベロッパーツールでnum の値が取れているか確認してみてください。
http://ryus.co.jp/blog/customize-php-search-1/
http://eng-entrance.com/javascript-display-error
history.back()のときだけスクリプトが動かない状態であれば、history.back()ではなくPOSTしてPHP側で値を設定してしまうくらいしか思いつきません。
ご連絡ありがとうございます。
デベロッパーツールでのnum値の確認方法がよくわからなかったのでalertで確認したところ、確認画面から帰ってきたとき、IEのみ「0」でした。他のブラウザは値がしっかりと入っています。
おっしゃるとおり、history.back()の挙動とブラウザの関係が原因でしょうか。
＞history.back()ではなくPOSTしてPHP側で値を設定してしまうくらいしか思いつきません。
お時間がございましたらこの方法も教えていただくことはできますでしょうか。
何度も申し訳ございません。
あなたの回答
tips
プレビュー
