DBのコンボボックスで選択されたレコードの内容を取得して、その内容をラジオボタンに反映する

Question

以前の質問

https://teratail.com/questions/110444

にて、DBを使ってコンボボックスをつくり、コンボボックスを選択した際に、レコードにある別のカラムをテキスト表示する処理において、今度は、別のカラムに「0：OFF」と「1：ON」で登録されている複数カラム内容を取得して、そのカラム毎にラジオボタンを「0：OFF」の場合「非アクティブ」、「1：ON」の場合「アクティブ」として表示させようと考えております。

コンボボックスからはJavaにて「値：value」を取得して、その値を使ってjavascriptの処理の中でphpで命令してmysqlの必要なテーブルからレコードを読み込む込み、その中よりラジオボタンに対応したカラムの状態を条件判断して、ラジオボタンを「disabled」すればいいのだとはわかっているのですが、上手くコードを書くことが出来ません。

そもそも、この考えも間違っているのかもしれません。

そのあたりも踏まえて、考え方や処理の方法やコードなどを、ご教授頂けないかと思います。

宜しくお願い致します。

【HTML】
	<div class="form-group" style="height: 25px">
    	<label for="shelf_name" class="control-label col-sm-1" style="padding-left: 0">保管場所</label>
        <?php
            $link = mysqli_connect('localhost', 'root', '', 'db_keisoku' ); //MySQLのDBへ接続
            if (!$link) {
                echo "データベースに接続できませんした" . PHP_EOL;
            }
//            echo "データベースに接続と選択ができました" . PHP_EOL;
            $query = "SELECT * FROM shfnum_tbl";
            $result = mysqli_query($link, $query);
            if (!$result) {
                print ("データ取得失敗<br>");
                exit();
            }

>>>此処で、コンボボックスでDBのレコードの棚番号カラムを選択する

            echo '<div class="col-sm-4">';
           echo '<select name="shelfnum" class="form-control" onchange="outputSelectedValueAndText(this);">';
            echo '<option value="" selected="selected">棚番号を選択してください</option>';
            while ($value = mysqli_fetch_array($result, MYSQL_ASSOC)) {
                echo "<option value=\"" . $value["shelf_name"] . "\">" . $value["shelf_num"] . "</option>";
            }
            echo '</select>';
            echo '</div>';
            // 棚のある場所を表示
            echo '<div class="col-sm-5">';
            echo '<input type="text" class="form-control" name="shelfName" readonly>';
            echo '</div>';
            mysqli_close($link);
        ?>
    </div>

【javascript】
>>>棚番号カラムから、DBよりそのカラムと同じレコードの棚段数カラム(1～8)の設定「0：OFF/ 1：ON」により、ラジオボタンをアクティブもしく非アクティブとしたい
    function outputSelectedValueAndText(obj)
    {
        var value = obj.options[idx].value; // 値
         <?php
            $j_link = mysqli_connect('localhost', 'root', '', 'db_keisoku' ); //MySQLのDBへ接続
            if (!$j_link) {
                echo "データベースに接続できませんした" . PHP_EOL;
            }
            //            echo "データベースに接続と選択ができました" . PHP_EOL;
            $j_query = "SELECT * FROM shfnum_tbl WHERE shelf_num = $value";
            $j_result = mysqli_query($j_link, $j_query);
            if (!$j_result) {
                print ("データ取得失敗<br>");
                exit();
            }
            $j_row = mysqli_fetch_array($j_result);
            if ($j_row["shelf_step_1"]) {
                echo'<input type="radio" name="shelf_num" value="1"><a style="margin-left: 5px">1段目</a>';
            } else {
                echo'<input type="radio" name="shelf_num" value="1" disabled><a style="margin-left: 5px">1段目</a>';
            }
            
            
       ?>

2018/2/26追加

イメージ画像です

Comments

[kei344]

本文中の「Java」は「JavaScript」のことでしょうか。「JAVA」という言語もあるため、正確に記述してください。また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[sin-zo]

申し訳ありません。指摘して頂いた内容を修正および追加させて頂きました。

[kei344]

修正された本文中にある「Java」は言語としての「Java」なのですね。また、JavaScript中にPHPのコードが混ざっていますが、PHPで出力しているのでしょうか？

[sin-zo]

混ざっていますが、そもそもこれが正しいのかが、不明です。HTML上で変更されたコンボボックスの値から、DBのレコードを選び出し、その結果をHTMLへ反映させたいのですが、それが、Javascript中でPHPをすべきなのか試行錯誤での、そのコード結果です。正直、正常に動作しておりませんし、エラーが出ている状態です。

[m.ts10806]

java自体のコードがどこにもないので表現を混同しているだけだと思います。あと、javascriptはあくまでクライアント側の言語でPHPはサーバー側の言語なので、今回のように幾らjavascript側でvalueというのを準備してもphp側で$valueという変数では使えません。プログラム上は上から順に見えますが、PHPを実行した結果がjavascriptを含んだhtml上に出るだけなので、想定のようには動きません。つまり「Javascript中でPHPを」はできません（ajaxなら別ですけど）

[m.ts10806]

「レコードにある別のカラムをテキスト表示する処理において～～」のところが、文章だけではどうなったらOKなのか今ひとつピンと来ません。簡単で良いので画像などで図示していただくことはできますか？「コンボボックスで選択した値でDBに問い合わせる」ところまではイメージできるのですが、そのあとをどういう結果にするか、というところです。

[sin-zo]

どうも皆様方には、私の質問が不快な気持ちにさせているようです。申し訳ありません。そもそも、今回の質問に対しては、どのようにコーディングすればよいものなのか自体、あまりわかっておりません。今掲示しておりますコードに置きまして、色々調べた上で、文法上やコーディングの誤りなどのある未完成のものだと理解した上で、掲示させていただいております。そのため、あまり理解出来ていない私の質問や、皆様方からの質問に対する返答が的を得ないものとなり、余計難解な質問になっているのではないかと思います。ですが、今回の質問を解決するために、HTMLやPHP,Javascriptをどのようにコーディングすればよいのかの、皆様のお知恵をお聞きしたく、是非ともアドバイスを頂けないでしょうか、宜しくお願いします。

[m.ts10806]

あ、いえ、私は特に不快になっているわけではありませんし、コードが未完成なんだろうなというところは重々承知でコメントしています。解決（よりよい回答を得る）のためには「何をしたいか」がより具体的になっている必要があります。もし文章が難しいのであれば図示でも結構ですし、イメージが伝わるようにしてもらえれば、解決方法は回答する側で考えます。（それが本当に解決に向かうかどうかは質問者さんが実践してみて得たい結果を得られるか、になります）

[x_x]

イメージ画像の表部分はすでにできているのでしょうか？　そうであればその部分のHTMLも提示願います。

[sin-zo]

表の部分は、phpAdminをプリントスクリーンで取得して、加工しております。コンボボックスなどの部分は、既にコードを開示しております。

[x_x]

表部分の出力もこれから作るということでしょうか？

[sin-zo]

表の部分は、作りません。テキストボックスの部分やラジオボタンの部分が、参照するデータベースのレコードとカラムを紹介するために、イメージとして掲載致しました。

[x_x]

では現状クライアントにはデータがないということなので、あらかじめデータを埋め込むか、Ajaxで取得するかということになろうかと思います。どういう風にする予定でしょうか？

[sin-zo]

PHPでデータベースにアクセスしてから、イメージのテーブルを読む込むようにしています。

[x_x]

いずれにせよサーバー側はそうなります。クライアントにはどう渡すつもりでしょうか？

[sin-zo]

そのあたりの処理があまり理解していません。javascriptでするのだろうというような程度です。そのあたりは、正直あまり理解していないため、どのような事をすればよいのかがわからずに、ここで質問させて頂いております。

Answer 1

コメントでも書きましたが、念のため再掲します。

”””””””””””
javascriptはあくまでクライアント側の言語でPHPはサーバー側の言語なので、
今回のように幾らjavascript側でvalueというのを準備してもphp側で$valueという変数では使えません。
プログラム上は上から順に見えますが、PHPを実行した結果がjavascriptを含んだhtml上に出るだけなので、
想定のようには動きません。
”””””””””””

また、全面的な解決方法ではありませんが、

棚番号カラムから、DBよりそのカラムと同じレコードの棚段数カラム～～

の部分の対応方針です。

ajaxを利用します。

function outputSelectedValueAndText(obj)
{
    //セレクトボックスから情報を取得
    var value = obj.options[idx].value; // 値
    var arg = {shelfnum:value };

    //ajaxにてPHPに選択した情報をPOST
    $.ajax({
        url: "hogehoge.php",
        data: arg,
        type: "POST",
        dataType:'json',
    }).done(function(data, status, xhr) {
        //通信および情報取得が成功した場合
        if(status === "success" && data.result == "1"){
            console.log(data.data_row);
　　　　　　 //あとは任意の場所にhtmlを出力するようにjavascriptで書いていけばいいはず
            if(data.data_row.shelf_step_1){ //shelf_step_1がtrueの場合？
            //////省略
            }else{
            //////省略
            }
            if(data.data_row.shelf_step_2){ //shelf_step_1がtrueの場合？
            //////省略
            }else{
            //////省略
            }
            ////////////省略
        }else{
            console.log(xhr);
            alert("データ取得失敗");
        }
    }).fail(function(xhr, status, error) {
        console.log(xhr);
        alert("データ取得失敗");
    });

}

hogehoge.php

$res["result"] = "9";
if($_SERVER["REQUEST_METHOD"] !== "POST"){
  echo json_encode($res);
  exit();
}
if(!isset($_POST["shelfnum"])){
  echo json_encode($res);
  exit();
}

$j_link = mysqli_connect('localhost', 'root', '', 'db_keisoku' ); //MySQLのDBへ接続
if (!$j_link) {
  echo json_encode($res);
  exit();
}

$j_query = "SELECT * FROM shfnum_tbl WHERE shelf_num = ".mysqli_real_escape_string($_POST["shelfnum"]);
$j_result = mysqli_query($j_link, $j_query);
if (!$j_result) {
  echo json_encode($res);
  exit();
}
$j_row = mysqli_fetch_array($j_result);
$res["result"] = "1";
$res["data_row"] = $j_row;

echo json_encode($res);
exit();

イメージですが、これでひとまず選択した情報を元にPHPからデータを取得してjavascriptで扱うところまではいけたかと思います。
あとはjavascriptにてhtmlに任意の情報（ラジオボタンとか？）を埋め込む処理を書いていく感じになるのではないかと。

正常に取得できたかどうかは、下記の記述を通れば開発ツールから参照可能なはず。

console.log(data.data_row);

※ちなみにjQueryが必要です

Comments

[sin-zo]

返答が遅くなり申し訳ありません。確認させて頂き、思う通りの動作ができました。ありがとうございました。Ajaxを使用して、javascriptとPHPでデータベースからデータを取得する方法が、よく理解できました。

本当に、ありがとうございました。

[m.ts10806]

解決できたようで何よりです。