質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

2210閲覧

2段プルダウンの値の保持について(JavaScript html)

jipang5054

総合スコア6

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/12/09 06:20

###前提・実現したいこと
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/ツール等のバージョンなど)
より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/12/09 08:03

.html内にPHP書かれてますが、そういう設定をしているということで良いでしょうか?
jipang5054

2017/12/11 03:48

ご連絡ありがとうございます。返信が遅くなり大変申し訳ございません。.htaccess に「AddHandler x-httpd-php5.3 .php .phps .html」の記述をしております。何卒宜しくお願い申し上げます。
x_x

2017/12/13 05:24

北海道と表示されているにもかかわらず0というのが解せないのですが、都道府県もスクリプトにより生成しているのでしょうか?
jipang5054

2017/12/13 11:33

ご連絡ありがとうございます。上記サンプルコード上ではhtmlで書いておりますが、実際はMySQLのテーブルからPHPを利用してデータを取得しております。クリア(value値:0)される流れは、①エントリー画面より確認画面へ移動②確認画面よりbuttonで戻る③上記現象④その状態で再度確認画面へ移動⑤テスト的にPOST値を確認すると”0”となる。この辺りが問題点でしょうか。
x_x

2017/12/14 06:18

"0"を確認しているのは、確認画面のさらに先ということですか? 確認画面は提示されていないため、これだけでは難しいかもしれません。
jipang5054

2017/12/15 03:21

すみません。私の確認間違いでした。しっかりと、都道府県のvalue値はpostされておりました。ご指摘頂きありがとうございました。
guest

回答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
Tomak

総合スコア1652

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jipang5054

2017/12/21 09:03

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(都道府県)の表示項目にすると反応しませんでした。 私の理解不足で御足労をお掛け致します。 一度ご確認頂けましたら幸甚です。
Tomak

2017/12/21 12:54 編集

他の方の回答のコメントに、確認画面 → エントリーフォームへ戻る場合にPOSTではなく「history.back()」しているとあったので、回答を全般的に編集しました。また、セレクトボックスBの選択値の復元用のコードが抜けていたので、追加しておきました。 実際にコードは動かしていないので不具合があるかもしれません。
guest

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
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jipang5054

2017/12/12 06:36

ご連絡頂きありがとうございます。 大変申し訳ないのですが、教えていただきました内容がよく理解できませんでした。 <script>から</script>までのコードを、<body>タグの直前に移動しましたが改善されません。 そもそも私の理解不足かと思います。 DOMとは?から調べてみているところです。 引き続き自力で解決できるように努力致しますが、お時間がございましたら、どのコードをどの位置へ移動すればいいのか、もう少し詳しく教えていただけないでしょうか。 レベルが低すぎで申し訳ございません。 何卒宜しくお願い申し上げます。
x_x

2017/12/12 07:20

まったく読んでませんが、</body>の直前ですかね? <body>の直前ということはありえないので
kei344

2017/12/12 10:22

To: x_xさん 補足ありがとうございます。「</body>」と書いたつもりでした・・・。修正しておきます。 To: jipang5054さん 上記の通りです。
jipang5054

2017/12/13 05:07

To: x_xさん To: keiさん お忙しい中ご指摘頂き大変ありがとうございます。 <head>内の<script>から</script>までの全てのコードを、</body>タグの直前に移動しましたが改善されません。(修正方法としてはこの理解で宜しいでしょうか。) ちなみに、確認画面から戻る方法はsubmitではなくbuttonでした。 以下、コードです。 <input name="back" type="button" onClick="history.back();" value=" 入力画面へ戻る "> 間違いがあればご指摘いただければと思います。 何卒宜しくお願い申し上げます。
kei344

2017/12/14 18:00

num の値が取れているか確認してみてください。あと、history.back()で戻る場合の挙動はブラウザによって違ったと思います。(前の値がきちんと残ったり残らなかったり不安定だった気がします)
jipang5054

2017/12/18 09:46

ご連絡が遅くなりすみませんでした。「試したこと」で書いてあるコードをすっかり忘れておりました。 BelongList() 関数を定義した後に、該当の2行を挿入しました。 Aプルダウン・Bプルダウンと選択し、確認画面へ移動し、戻るボタンでエントリー画面へ戻ると、ブラウザによって以下の結果となりました。 <safari/firefox> A・Bが選択された状態になりました。(まさしく解決された状態) <Chrome> Aは選択された状態で、Bは、Aをキーとした選択肢(例:"北海道","北海道倶楽部","札幌クラブ")が表示され選べるようになりました。(ここまででも大変な進歩です) <IE> 変化なし(Bプルダウンに何も表示されない) ご指摘のとおり、history.back()で戻る挙動の差なのでしょうか。 ちなみに以下3つの方法で確認画面から「戻る」動きを試しました。 <input name="back" type="button" onClick="history.back();" value=" 入力画面へ戻る "> <a href="#" onClick="history.back(); return false;">入力画面へ戻る</a> <button type="button" onClick="history.back()">入力画面へ戻る</button> この不安定な状況を安定させる方法がございましたら教えてください。 何卒宜しくお願い申し上げます。
jipang5054

2017/12/21 09:10

ご連絡ありがとうございます。 デベロッパーツールでのnum値の確認方法がよくわからなかったのでalertで確認したところ、確認画面から帰ってきたとき、IEのみ「0」でした。他のブラウザは値がしっかりと入っています。 おっしゃるとおり、history.back()の挙動とブラウザの関係が原因でしょうか。 >history.back()ではなくPOSTしてPHP側で値を設定してしまうくらいしか思いつきません。 お時間がございましたらこの方法も教えていただくことはできますでしょうか。 何度も申し訳ございません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問