二段階プルダウンメニューでのGET送信方法

Question

前提・実現したいこと

二段階プルダウンメニューでの選択をGETでHTMLからPHPに送信したい。

発生している問題・エラーメッセージ

問題としては、二段階目で一つのselect文にnameを入れてGETで送信することまではできるのですが、複数のselect文になると送信できなくなります。

該当のソースコード

<form method="GET" action="buisearch.php">
<div class="mainclass cityward">
			<select class="mainselect">
		<option value="">エリアを選択</option>
		<option value="東北">東北地方</option>
                <option value="関東">関東地方</option>
                <option value="中部">中部地方</option>
                <option value="近畿">近畿地方</option>
                <option value="中国">中国地方</option>
                <option value="四国">四国地方</option>
                <option value="九州">九州地方</option>
			</select>

            <select id="東北" name="ken" class="subbox">
                <option value="">東北地方を選択</option>
                <option value="北海道">北海道</option>
                <option value="青森">青森県</option>
                <option value="岩手">岩手県</option>
                <option value="秋田">秋田県</option>
                <option value="宮城">宮城県</option>
                <option value="山形">山形県</option>
                <option value="福島">福島県</option>
            </select>
	    <select id="関東" name="ken" class="subbox">
		<option value="">関東地方を選択</option>
		<option value="茨城">茨城県</option>
		<option value="栃木">栃木県</option>
               	<option value="群馬">群馬県</option>
		<option value="埼玉">埼玉県</option>
		<option value="千葉">千葉県</option>
		<option value="東京">東京都</option>
		<option value="神奈川">神奈川県</option>
	      </select>

            <select id="中部" name="ken" class="subbox">
                <option value="">中部地方を選択</option>
                <option value="新潟">新潟県</option>
                <option value="富山">富山県</option>
                <option value="石川">石川県</option>
                <option value="福井">福井県</option>
                <option value="山梨">山梨県</option>
                <option value="長野">長野県</option>
                <option value="岐阜">岐阜県</option>
                <option value="静岡">静岡県</option>
                <option value="愛知">愛知県</option>
            </select>

            <select id="近畿" name="ken" class="subbox">
                <option value="">近畿地方を選択</option>
                <option value="三重">三重県</option>
                <option value="滋賀">滋賀県</option>
                <option value="京都">京都府</option>
                <option value="大坂">大阪府</option>
                <option value="兵庫">兵庫県</option>
                <option value="奈良">奈良県</option>
                <option value="和歌山">和歌山県</option>
            </select>

            <select id="中国" name="ken" class="subbox">
                <option value="">中国地方を選択</option>
                <option value="鳥取">鳥取県</option>
                <option value="島根">島根県</option>
                <option value="岡山">岡山県</option>
                <option value="広島">広島県</option>
                <option value="山口">山口県</option> 
            </select>

            <select id="四国" name="ken" class="subbox">
                <option value="">四国地方を選択</option>
                <option value="徳島">徳島県</option>
                <option value="香川">香川県</option>
                <option value="愛媛">愛媛県</option>
                <option value="高知">高知県</option>
            </select>

            <select id="九州" name="ken" class="subbox">
                <option value="">九州地方を選択</option>
                <option value="福岡">福岡県</option>
                <option value="佐賀">佐賀県</option>
                <option value="長崎">長崎県</option>
                <option value="熊本">熊本県</option>
                <option value="大分">大分県</option>
                <option value="宮崎">宮崎県</option>
                <option value="鹿児島">鹿児島県</option>
                <option value="沖縄">沖縄県</option>
            </select><br>
            <script type="text/javascript">

                // HTMLの読み込み直後に実行：
                document.addEventListener('DOMContentLoaded', function() {
        
                    // ▼とりあえずサブBOXを全て非表示にする（CSSで書けば早いが）
                    var allSubBoxes = document.getElementsByClassName("subbox");
                    for( var i=0 ; i<allSubBoxes.length ; i++) {
                        allSubBoxes[i].style.display = 'none';
                    }
        
                    // ▼全てのプルダウンボックスごとに処理
                    var mainBoxes = document.getElementsByClassName('mainclass');
                    for( var i=0 ; i<mainBoxes.length ; i++) {
        
                        var mainSelect = mainBoxes[i].getElementsByClassName("mainselect");	// メインのプルダウンメニュー（※後でvalue属性値を参照するので、select要素である必要があります。）
                        mainSelect[0].onchange = function () {

                            // 同じ親要素に含まれている全サブBOXを消す
                            var subBox = this.parentNode.getElementsByClassName("subbox");	// 同じ親要素に含まれる.subbox（※select要素に限らず、どんな要素でも構いません。）
                            for( var j=0 ; j<subBox.length ; j++) {
                                subBox[j].style.display = 'none';
                            }
        
                            // 指定されたサブBOXを表示する
                            if( this.value ) {
                                var targetSub = document.getElementById( this.value );	// 「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
                                targetSub.style.display = 'inline';
                            }
                        }
        
                    }
        
                });
            </script>
<input type="submit" value="検索">
</form>

<?php
 
//データベース接続
$server = **** 
$userName = ****
$password = ****
$dbName = ****
 
$mysqli = new mysqli($server, $userName, $password,$dbName);
 
if ($mysqli->connect_error){
	echo $mysqli->connect_error;
	exit();
}else{
	$mysqli->set_charset("utf-8");
}
 
$sql = "SELECT gymname,gymzipcode,gymaddress,gymtel,gymholiday,gymtime,gymurl FROM sportgym A,gymmachin B,machin C,bui D WHERE D.buiname='{$_GET['bui']}' and D.buinumber=C.buinumber and C.machinnumber=B.machinnumber and B.gymnumber=A.gymnumber and A.gymaddress like '{$_GET['ken']}%'";
 
$result = $mysqli -> query($sql);
 
//クエリー失敗
if(!$result) {
	echo $mysqli->error;
	exit();
}

試したこと

name="ken"のところをselect文ごとに変更(name="ken1",name="ken2"など)してPHP側のSQL文でOR条件で試したりしたのですが駄目でした

補足情報（FW/ツールのバージョンなど）

一度ちゃんとGET送信ができているか、二段階目のselect文を一つにして試したところ、ちゃんと送信されていたのでDB接続やHTML、PHP自体は問題ありません。
PHPのSQL文に$_GET['bui']などがありますが、こちらは別にラジオボタンでの絞り込みなので関係がありません。
二段階目のselect文で都道府県を選択した際にその選択された都道府県の名前をPHPの方に送信して、SQLでDBに入っている住所と前方一致検索をしたいと考えています。

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

Comments

[m.ts10806]

提示したhtmlだけ見るとなにしたいのかわかりません。
「二段階」と仰っていますが、操作や全体の流れを説明願えますか？
要件不明瞭と感じています

[XNXSXMXR]

・formタグ(<form>～</form>）の外にselectタグが書かれていないか。
・北海道を選択して試したが、北海道のoptionタグのvalue属性の値が空なので取得した値も空だった。
・GETのつもりがPOSTしていた。
・どこかに別のHTMLタグがあり、その名前が「ken」だった。

などなど、確認してみてください。

[退会済みユーザー]

m.ts10806様>>申し訳ございません。Javascriptの部分が抜けていたため追記させていただきました。
二段階プルダウンメニューについてですが、まず最初に一つだけプルダウンメニューが表示されており、地方を選択できるようになっています。（東北・関東・中部など）
地方を選択するとその横に新しいプルダウンメニューが表示され、その地方にある都道府県が選択できるようになります。（関東を選択した場合、東京都・埼玉県・神奈川県・千葉県などです）
そのあとに検索ボタンを押した場合、選択した都道府県の名前をGETで送信し、SQLのほうで$_GETで取得し、DBにあります住所と前方部分一致をしてその都道府県と一致するデータを出したいと考えております。

[退会済みユーザー]

XNXSXMXR様>>formタグ等を書くのを忘れていたため修正いたしました。申し訳ございません。
提示したhtml以外にはkenを使用していないのです・・・。結果として今提示しているHTML文ではプルダウンメニューでの絞りがうまくいっておらず、都道府県を選択しても全ての都道府県がでてきてしまう始末です。また都道府県を絞らずに検索を押したら何一つ出てこないという形になっています。
また北海道が2行あるのはこちらのミスでしたので修正させていただきます。

Answer 1

画面上ではJavaScriptによって非表示にしていますが、これは見えないだけでselectタグは機能しています。
なので、ボタン押して送信した際にURLには「ken=&ken=北海道&ken=.....」となっているかと思います。

同じ名前のパラメータがある場合は後優先なので、$_GET['ken']は空になったのではないかと思います。

Comments

[退会済みユーザー]

仰る通り、URLはそのようになってしまっています。
その場合、select文のnameを一つずつ変えて、PHPのSQL文の方でORで一致するかどうかを繰り返したら良いのでしょうか？

[XNXSXMXR]

案１：JavaScriptで非表示(displayスタイルを 'none'にしているところ)の他に「disabled」 をつけて無効にする。

案２：各都道府県のselectタグのnameをそれぞれ変えて、PHP側で入力値チェックを行ってからSQL文に組み込む。

私は愚直にisset()を使って$_GETに存在しているかチェックしていましたが、他の質問の回答で「filter_input()」という標準関数があることを知りました。

https://qiita.com/mgng/items/901cf7f50a224b19335b

SQL文でOR条件を付けて一致するか繰り返すよりも、PHPのコードで入力値チェックを行ったほうがいいと思います。

[退会済みユーザー]

案2の方を実行してみました。

$ken1 = filter_input( INPUT_GET, "ken1" );
$ken2 = filter_input( INPUT_GET, "ken2" );
$ken3 = filter_input( INPUT_GET, "ken3" );
$ken4 = filter_input( INPUT_GET, "ken4" );
$ken5 = filter_input( INPUT_GET, "ken5" );
$ken6 = filter_input( INPUT_GET, "ken6" );
$ken7 = filter_input( INPUT_GET, "ken7" );

$sql = "SELECT gymname,gymzipcode,gymaddress,gymtel,gymholiday,gymtime,gymurl FROM sportgym A,gymmachin B,machin C,bui D WHERE D.buiname='{$_GET['bui']}' and D.buinumber=C.buinumber and C.machinnumber=B.machinnumber and B.gymnumber=A.gymnumber and A.gymaddress like '{$_GET['ken1']}%' and A.gymaddress like '{$_GET['ken2']}%' and A.gymaddress like '{$_GET['ken3']}%' and A.gymaddress like '{$_GET['ken4']}%' and A.gymaddress like '{$_GET['ken5']}%' and A.gymaddress like '{$_GET['ken6']}%' and A.gymaddress like '{$_GET['ken7']}%'";

入力値チェックを初めてしたのであってるかどうか分からないのですが、このようにしたところ無事に出ました！ありがとうございました！

[m.ts10806]

そこまでするならDBに投げるSQLはプリペアドステートメント使ってほしい…