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

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

ただいまの
回答率

87.48%

プルダウンで選択したtextをMYSQLにPOSTしたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 497

score 3

プルダウンで選択したtextをMYSQLにPOSTしたいです。

現在のコードだと選択肢の値(番号)がPOSTされます。
index.php

<?php
  //DBへ接続
  try {
    $dsn = 'mysql:host=localhost;dbname=car_maker;charset=utf8';
    $user = 'root'; //root
    $pass = 'root'; //root
    $pdo = new PDO($dsn, $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false));
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
  } catch(PDOException $e) {
    exit('データベース接続失敗'.$e->getMessage());
  }
  //makerテーブル から値を取得し、 id と name を $maker_list配列 に格納
  $sql = "SELECT * FROM maker";
  $stmt = $pdo->query($sql);
  $maker_list = array();
  while($row = $stmt -> fetch(PDO::FETCH_ASSOC)){
    $maker_list[$row['id']] = $row['maker_name'];
  }
?>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="js/jquery-3.6.0.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      $(function(){
        //selectタグ(親) が変更された場合
        $('[name=car_maker]').on('change', function(){
          var maker_val = $(this).val();

          //maker_val値 を select.php へ渡す
          $.ajax({
            url: "select.php",
            type: "POST",
            dataType: 'json',
            data: {
              "maker_id": maker_val
            }
          })
          .done(function(data){
            //selectタグ(子) の option値 を一旦削除
            $('.car_model option').remove();
            //select.php から戻って来た data の値をそれそれ optionタグ として生成し、
            // .car_model に optionタグ を追加する
            $.each(data, function(id, name){
              $('.car_model').append($('<option>').text(name).attr('value', id));
            });
          })
          .fail(function(XMLHttpRequest, textStatus, errorThrown) {
        console.log("ajax通信に失敗しました");
        console.log("XMLHttpRequest : " + XMLHttpRequest.status);
        console.log("textStatus     : " + textStatus);
        console.log("errorThrown    : " + errorThrown.message);
          });

        });
      });
    </script>
    <title></title>
  </head>
<body>  


<h1></h1>
    <form action="send.php" method="post">
        <table>
           <tr>
                <th>メーカー:</th>
                <td><select class="car_maker" name="car_maker">
             <option>選択して下さい</option>
          <?php foreach($maker_list as $key => $maker_name){

          }?>
          </select></td>
            </tr>
            <tr>
                <th>車種:</th>
                <td>
          <select class="car_model" name="car_model">
          <option class="">選択して下さい</option>
          </select>
          </div></td>
            </tr>


            <tr colspan="2">
                <td><input type="submit" value="送信"></td>
            </tr>
        </table>
    </form>
</body>
</html>

select.php

<?php
  //直接のページ遷移を阻止
  $request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : '';
  if($request !== 'xmlhttprequest') exit;
  //DBへの接続
  //本来は db_connect関数 を作成して、DRYにした方が良いです。
  try {
    $dsn = 'mysql:host=localhost;dbname=car_model;charset=utf8';
    $user = 'root';
    $pass = 'root';
    $pdo = new PDO($dsn, $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false));
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
  }
  catch(PDOException $e) {
    exit('データベース接続失敗'.$e->getMessage());
  }
  //Ajaxで渡ってきた値をもとに modelテーブル から該当する model を抽出
  if (!empty($_POST['maker_id'])) {
            $maker_no = $_POST['maker_id'];
  //$maker_no = $_POST['maker_no'];
  $sql = 'SELECT * FROM model WHERE maker_id = :maker_id';
  $stmt=$pdo->prepare($sql);
  $stmt->bindValue(':maker_id', (int)$maker_no, PDO::PARAM_INT);
  $stmt->execute();

  //抽出された値を $model_list配列 に格納
  $model_list = array();
  while($row = $stmt -> fetch(PDO::FETCH_ASSOC)){
    $model_list[$row['id']] = $row['model_name'];
  }
  header('Content-Type: application/json');
  //json形式で index.php へバックする
  echo json_encode($model_list);
}
 ?>

send.php

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
<?php

$dsn = 'mysql:host=localhost;dbname=gmatome;charset=utf8mb4';
$username = 'root';
$password = 'root';

// try-catch


// 1.もし、ポストにデータがあるならば・・・
if (isset($_POST["car_maker"],$_POST["car_model"])) {
    // 2.ポストのデータを変数にしま~す
    $car_maker = $_POST["car_maker"];
    $car_model = $_POST["car_model"];

}  
// 3.データベースに接続しましょう
try{
    $dbh = new PDO($dsn,$username,$password);
    $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


    // SQL文 :nameと:romajiは、名前付きプレースホルダ
    $stmt = $dbh->prepare("INSERT INTO matome(car_maker,car_model) VALUES (:car_maker,:car_model)");

    //トランザクション処理
    $dbh->beginTransaction();

    try{
        $stmt->bindParam(':car_maker', $car_maker);
        $stmt->bindParam(':car_model', $car_model);
        $stmt->execute();

        //コミット
        $dbh->commit();

    }catch (PDOException $e) {
        //ロールバック
        $dbh->rollback();
        throw $e; //
    }
    // 接続を閉じる
    //$pdo = null; スクリプト終了時に自動で切断されるので不要
}catch (PDOException $e) {
    // UTF8に文字エンコーディングを変換します
    exit(mb_convert_encoding($e->getMessage(),'UTF-8','SJIS-win'));
}
?>
   </body>
</html>

上記で
カーメーカーリストがトヨタ(データベースのidは1)、ホンダ、・・・としてトヨタを選択
トヨタの車種リストがアルファード、プリウス(データベースのidは2)・・・としてアルファードを選択すると
mysqlに1、1がpostされます。これをトヨタ、プリウスで入れたいです。

調べたこと

var  = $('option:selected').text();を使用するといいようですが、どこにどのように挿入したら
いいのか分かりませんでした。

データベース

データベース名car_maker
テーブル名maker

id maker_name
1 TOYOTA
2 HONDA
3 NISSAN

データベース名car_model
テーブル名model

id maker_id model_name
1 1 アルファード
2 1 プリウス
3 3 GT-R
4 2 オデッセイ

データベース名gmatome
テーブル名matome

id date maker_id model_name naiyou
1 1029 TOYOTA アルファード オイル交換
2 1030 TOYOTA アルファード 車検
3 1031 NISSAN GT-R 速い
4 1101 HONDA オデッセイ 車検
5 1102 1 2 車検

一番下のgmatomedbのid1~4のようにメーカーと車種が入ってほしいのですが
id5のようにメーカーと車種が数字で入ってしまいます。

会社で使用するものである為、実際のデータは使用しておらず、
車に置き換えて投稿させて頂いており、間違いが多々ありました。
その他、gmatomedbの内容記入欄や日付欄などはindex.phpでプルダウン選択と
同時に記入しdbに入ってくれています。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • FKM

    2021/03/24 09:43

    POSTじゃなくてDBのテーブルにインポートしたいってことでしょうか。
    それならば、使用しているテーブルの提示お願いします。
    根本的な間違いをしている可能性があります。

    キャンセル

  • tapp

    2021/03/24 13:23

    有難うございます。インポートしたいということでいいかと思いまます。データベースにデータを追加していきたいです。
    投稿を修正させて頂きましたのでよろしくお願いいたします。

    キャンセル

回答 2

checkベストアンサー

0

二通りの方法があります。

1.プルダウンのvalueにマスタの値を紐付ける。マスタidの取得はidプロパティから取得する

紐付けているプルダウンのvalueにマスタの値を持ってくるといいです。
現在、Ajaxで引っ張ってきているのはマスタのidだけなので、値も取得するようにするといいでしょう。
idは英数字から始めないほうがいいので、あえて接頭辞をつけています。

<select name="car_maker">
<option id="m1" value="アルファード">アルファード</option>
</select>

2.取得したidからPHP内のプログラムで、マスタに紐付いたメーカー名と車種名を取得する

現状だとPOSTの値はidしか取得していませんので、そこからメーカー名を取得できるようにします。

$sql = "select id, maker_name from car_maker where id = '{$carmaker}'";

実際はプレースホルダなどを使ってちゃんと処理してください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/03/24 18:12

    ご回答頂きありがとうございます。2パターンについて明日試してみます。

    キャンセル

  • 2021/03/31 18:25

    パソコンを触れなかったことと、勉強不足でどこを触ったらいいかよくわからず、まだ出来ておりません。
    1番のやり方はindex.phpの91行目の
    echo '<option name="" value="'.$key.'">'.$maker_name.'</option>';
    のvalueのところに値を持ってくるという感じでしょうか。

    キャンセル

0

ajaxでselect.phpを呼んでますが、send.phpになっています
またsend.phpがjsonを返すことを期待しているのに、だらだらとap

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/03/23 21:23 編集

    select. phpを記載しておりませんでした。失礼しました!
    プルダウンは連動できておりsend.phpでmysqlに送る段階でつまづいております。
    質問に追記致しました。よろしくお願いします。

    キャンセル

  • 2021/03/23 21:49

    ajaxでdoneに処理が流れていることを確認してください

    .done(function(data){
    console.log(data);

    もしdataがjsonできちんと受け取れていれば、ご提示のソースで
    連動するselectが更新されると思います
    最初のoptionは消さないほうが良いかもしれません

    $('.car_model option:not(:first)').remove();
    $.each(data, function(id, name){
    $('.car_model').append($('<option>').text(name).attr('value', id));
    });

    キャンセル

  • 2021/03/24 08:25

    ご回答ありがとうございます。教えて頂いたコードに変更しました。
    プルダウンが連動して選択する操作は既に出来ておりますので、
    プルダウンで選択した、プルダウンに表示されている
    メーカー名や車名をデータベースにpostするにはどのような記述に
    したら良いのでしょうか。

    キャンセル

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

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る