実現したいこと

test.phpというファイルに<li>タグが４つあり、名前情報とスコア情報をphpで送るプログラムを作っています。
また、クリックしたliタグのインデックス番号に応じて、送信される二つ目のinputタグのname属性の値が変わるようにしています。
（例えば、リスト１をクリックするとスコアというinputタグのname属性はscore1になり、
リスト２をクリックすると、スコアというinputタグのname属性はscore２になります）
そして、もし送られてきたnama属性がscore1ならscore1カラムに、score2ならscore2カラムに保存したいのですがやり方がわかりません。
下記のようにif分岐を作りましたが、分岐の中に重複した処理を書いてもいいのでしょうか？

if ( isset($_POST['score1']) ) {
    $score=$_POST['score1'];
   }
   if ( isset($_POST['score2']) ) {
    $score=$_POST['score2'];
   }
   if ( isset($_POST['score3']) ) {
    $score=$_POST['score3'];
   }
   if ( isset($_POST['score4']) ) {
    $score=$_POST['score4'];
   }

登録ボタンを押すと、send.phpに遷移して名前情報とスコア情報を送りたいのですが、エラーが出て送れません。
困ってます。助けてください。

ここに実現したいことを箇条書きで書いてください。

クリックしたインデックス番号に応じてinputのname属性を変更し正常にデータベースに保存したい

発生している問題・エラーメッセージ（リストのどこもクリックせずに送信した場合）

データベースに接続できませんでした。SQLSTATE[42S22]: Column not found: 1054 Unknown column 'score' in 'field list'

該当のソースコード

test.php
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7</head>
8<body>
9<ul>
10        <li>リスト１</li>
11        <li>リスト２</li>
12        <li>リスト3</li>
13        <li>リスト4</li>
14    </ul>
15    <form action="send.php" method="post">
16        <p>名前</p>
17        <input id="input" type="text"name="name" required>
18        <p>スコア</p>
19        <input id="input2" type="text"name="score1" required>
20        <p class="submit"><input type="submit" value="登録" class="button"></p>
21    </form>
22    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
23    <script>
24        $(function() {
25
26$('ul li').click(function() {
27  
28    $(this).addClass('active');
29    let targetIndex = $('ul > li').index($('.active'));
30    targetIndex++;
31    console.log(targetIndex);    
32 
33    $('#input2').attr('name', "score"+targetIndex);
34  
35
36  });
37
38});
39
40    </script>
41    
42</body>
43</html>

send.php
1<?php
2//DB名、ユーザー名、パスワードを変数に格納
3 
4$dsn = 'mysql:dbname=test2;host=localhost;charset=utf8';
5$user = 'root';
6$password='';
7
8$PDO = new PDO($dsn, $user, $password); //PDOでMySQLのデータベースに接続
9try{
10  
11  // データベースに接続した後にオプションを指定するには PDO::setAttributeメソッドを使用します。
12  // PDO::setAttributeメソッドは属性をセットするメソッドです。
13  // PDO::ATTR_ERRMODEという属性でPDO::ERRMODE_EXCEPTIONの値を設定することでエラーが発生したときに、PDOExceptionの例外を投げてくれます。
14  $PDO->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); //PDOのエラーレポートを表示
15
16   //index.phpの値を取得
17   $name = $_POST['name'];
18   $score="";
19
20   if ( isset($_POST['score1']) ) {
21    $score=$_POST['score1'];
22   }
23   if ( isset($_POST['score2']) ) {
24    $score=$_POST['score2'];
25   }
26   if ( isset($_POST['score3']) ) {
27    $score=$_POST['score3'];
28   }
29   if ( isset($_POST['score4']) ) {
30    $score=$_POST['score4'];
31   }
32   
33 
34   $sql = "INSERT INTO list (name, score) VALUES (:name, :score)";
35    // テーブルに登録するINSERT INTO文を変数に格納　VALUESはプレースフォルダーで空の値を入れとく
36   //  :nameや:scoreはプレースホルダと呼ばれ、値を入れるための単なる空箱。SQL実行時に値を入れるため、このSQL文は何度も使い回しができ、パフォーマンス的にも優れる。
37   $stmt = $PDO->prepare($sql); //値が空のままSQL文をセット
38   $params = array(':name' => $name, ':score' => $score); // 挿入する値を配列に格納
39   $stmt->execute($params); //挿入する値が入った変数をexecuteにセットしてSQLを実行
40 
41    //データベース取得
42 $sql2 = 'select name from list';
43 $rec = $PDO->prepare($sql2);
44 $rec->execute();
45 $rec_list = $rec->fetchAll(PDO::FETCH_ASSOC);
46  
47}catch (PDOException $e) {
48  exit('データベースに接続できませんでした。' . $e->getMessage());
49}
50
51?>
52

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

vscode,xamppで開発しています

行動規範の内容に同意します

回答1件

ベストアンサー

全体仕様がいい加減なまま実装しようとして詰まっている感じですね
jsでinputのnameを変えるのはあまり得策ではありません（一応今回の回答はその方針にあわせてありますが）
また受け側もscore1-4という名前の違いを吸収するのも変ですし
ご提示ソースだとscoreという存在しないカラム名に投入しようとしています
総じてHTMLもjsもPHPもDB設計も、全部おかしいです

まず送信側から・・・

javascript
1<style>
2.active{color:red}
3</style>
4<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
5<script>
6$(function(){
7  $('li').on('click',function(){
8    $('.active').removeClass('active');
9    $(this).addClass('active');
10    var idx=$('li').index(this);
11    $('#input2').attr('name',"score"+(idx+1));
12  }).eq(0).trigger('click');
13});
14</script>
15<ul>
16<li>リスト1</li>
17<li>リスト2</li>
18<li>リスト3</li>
19<li>リスト4</li>
20</ul>
21<form action="send.php" method="post">
22<p>名前:<input id="input" type="text"name="name"></p>
23<p>スコア:<input id="input2" type="text" name="score1"></p>
24<p><input type="submit" value="登録" class="button"></p>
25</form>

send.php

php
1<?PHP
2$name=filter_input(INPUT_POST,"name");
3$score1=filter_input(INPUT_POST,"score1",FILTER_VALIDATE_INT);
4$score2=filter_input(INPUT_POST,"score2",FILTER_VALIDATE_INT);
5$score3=filter_input(INPUT_POST,"score3",FILTER_VALIDATE_INT);
6$score4=filter_input(INPUT_POST,"score4",FILTER_VALIDATE_INT);
7/*中略*/
8$sql="insert into list(name,score1,score2,score3,score4) values(?,?,?,?,?)";
9$stmt = $PDO->prepare($sql);
10$params=[$name,$score1,$score2,$score3,$score4];
11$stmt->execute($params);

参考

scoreの番号を渡して受け取った側で判断

HTML
1<style>
2[name=n]{display:none}
3[name=n]:checked ~ span{color:red}
4</style>
5<ul>
6<li><label><input type="radio" name="n" value="1" form="f1" checked><span>リスト1</span></label></li>
7<li><label><input type="radio" name="n" value="2" form="f1"><span>リスト2</span></label></li>
8<li><label><input type="radio" name="n" value="3" form="f1"><span>リスト3</span></label></li>
9<li><label><input type="radio" name="n" value="4" form="f1"><span>リスト4</span></label></li>
10</ul>
11<form action="send.php" method="post" id="f1">
12<p>名前:<input id="input" type="text"name="name"></p>
13<p>スコア:<input type="text" name="score"></p>
14<p><input type="submit" value="登録" class="button"></p>
15</form>

send.php

PHP
1<?PHP
2$name=filter_input(INPUT_POST,"name");
3$score=filter_input(INPUT_POST,"score",FILTER_VALIDATE_INT);
4$n=filter_input(INPUT_POST,"n",FILTER_VALIDATE_INT);
5if($n){
6${"score".$n}=$score;
7}
8$score1=$score1??NULL;
9$score2=$score2??NULL;
10$score3=$score3??NULL;
11$score4=$score4??NULL;
12var_dump([$name,$score1,$score2,$score3,$score4]);

DBへの投入は次のレベルなので割愛

投稿2024/02/23 15:09

編集2024/02/24 01:23

yambejp

総合スコア114863

loving

2024/02/24 00:43 編集

回答ありがとうございます。仰る通り何もかも未熟だと思いますので通常のやり方が身につけられるように勉強いたします。また、どうやってinputのnameを変えるのが適切なのか教えて頂けないでしょうか?

yambejp

2024/02/24 01:08

まずは個人ごとに4種類のスコアを保持する必要があるかを精査してくださいまた各スコアは一度に１つのスコアしか受け渡せないということですか？上記２つが前提だとしてscoreという確定したパラメータで受け渡し何番目のスコアかわたして受け取った側でn番目のスコアがscore点と読み替えればいいでしょう

loving

2024/02/24 13:37

おっしゃる通り、同時に四種類のスコアを送ることができる設計にした方がいいか精査しようと思います。また、まず教えて頂いた一番目のやり方で試したところ、 1048 Column 'カラム名' cannot be null というエラーが発生したため、スコア四つのデフォルト値をnullにするとエラーが解消されました。二つ目のやり方も試してみます。

行動規範の内容に同意します