ejsファイル(Node.js)において、チェックボックスで複数選択したときの値をMySQLに入れたい。

Question

前提・実現したいこと

はじめてのプロダクト開発中です。事情により家で1人で作っており相談する先生などいないため、どなたか回答いただけますと幸いです。
ローカル環境で、Node.jsにて簡単なwebサービスを作ろうとしています。

フォームの機能を実装中なのですが、チェックボックスを使えるようにしたいです。
分解すると2つあります。

• 実現したい事1：入力用のページ(/new)において、複数選択した値をMySQLの中に入れたい。
• 実現したい事2：編集用のページ(/edit)において、↑で格納したデータをチェックが付いた状態で表示して、データの上書きをしたい。

困っている事

今の段階で出来ている事としては、

• チェックボックスの選択が1つの場合なら、SQLのデータベースに値を入れることができます。
• チェックボックスではなくテキストボックス(=inputタグのtypeがtext)の場合なら、実現したい事の2つは実現できています。

実現したい事1つ目について、
困っていることは、チェックボックスを複数選択した場合に、SQLにINSERTされるデータが「inputタグのvalue値」ではなく「on」になってしまう事です。
例えば、value="A"とvalue="B"のものが選択されていた場合は、SQLにINSERTされるデータは、「A,B」だったり「"A","B"」のようにしたいです...。

実現したい事2つ目について、
1つ目がそもそもできていないため試せていませんが、checkedのものを表示するコードのイメージが湧きません。どう考えれば良いのでしょうか...。

現状実装しているコード

「app.js」、「new.ejs」、「edit.ejs」の3つのファイルのコードの一部を載せます。1つ目は色々定義しているもの、2つ目は入力用のページ、3つ目は編集用のページです。
**

「app.js」
expressやmysqlの使用、res.renderなどを定義しているファイルの一部です。
/newが入力用のページ、/editが編集用のページです。

app.post('/create', (req, res) => {
  connection.query(
    'INSERT INTO cost_info(payment_target,amount_money) VALUES (?,?)',
    [req.body.paymentTarget,req.body.amountMoney],
    (error, results) => {
      if (error) console.error(error);
      res.redirect('/list');
    }
  );
});

app.get('/new', (req, res) => {
  res.render('new.ejs');
});


app.get('/edit/:id', (req, res) => {
  connection.query(
    'SELECT * FROM cost_info WHERE id = ?',
    [req.params.id],
    (error, results) => {
      if (errr) console.error(error);
      res.render('edit.ejs', {cost: results[0]});
    }
  );
});

app.post('/update/:id', (req, res) => {
  connection.query(
    'UPDATE cost_info SET payment_target=?,amount_money=? WHERE id=?', 
    [req.body.paymentTarget,req.body.amountMoney,req.params.id],
    (error, results)=>{
      if (error) console.error(error);
      res.redirect('/list');
    }
  );  
});

「new.ejs」
入力用のページの一部です。
divの1つ目に関して、複数選択時に「on」ではなく「2つとものvalue値」をMySQLにデータを送る事ができません。
今は、どちらかのみが選択されていれば、選択されているほうのvalueがMySQL内に入ります。
(例：Aが選択されていたら、MySQLのpaymentTargetには"A"が入ります。AとBが選択されていたら"on"が入ってしまいます。"A,B"が入ってほしいです。)

      <form action="/create" method="post">
        <div>
          <label><input name="paymentTarget" type="checkbox" value="A">A</label>
          <label><input name="paymentTarget" type="checkbox" value="B">B</label>          
        </div>
        <div>
          <input name="amountMoney" type="number">
        </div>
        <input type="submit" value="送信する">
      </form>

「edit.ejs」
編集用のページの一部です。
チェックボックスでの実装を試みるまでは、元々テキストボックスでの実装で仮置きしていました。なので、ここではdivの1つ目のinputのtypeがtextになっています。
テキストボックスでならMySQLのデータを表示する事ができるのですが、typeをcheckboxにした際、MySQLのデータに対応してcheckedにする方法がわかりません。

      <form action="/update/<%= cost.id %>" method="post">
        <div>
          <input name="paymentTarget" type="text" value="<%= cost.payment_target %>">
        </div>
        <div>
          <input name="amountMoney" type="number" value="<%= cost.amount_money %>">
        </div>
        <input type="submit" value="保存する">
      </form>

調べた事

ejsファイルの為、「domument」や「domument.querySelectorAll」が使えませんでした。
https://developer.mozilla.org/ja/docs/Web/API/Element/querySelectorAll

Answer 1

req.body の処理に app.use(express.urlencoded({ extended: true })); を使った場合、A と B の両方を選択したら req.body.paymentTarget は "on" ではなく ["A", "B"] という配列になるはずです。
そのまま connection.query に渡すと ER_WRONG_VALUE_COUNT_ON_ROW というエラーになるので、次のようにすれば良いでしょう。(/update も同様。また、amountMoney は数値かチェックすべき。)

+function joinTarget(target) {
+  return Array.isArray(target) ? target.join(',') : target;
+}
+
 app.post('/create', (req, res) => {
   connection.query(
     'INSERT INTO cost_info (payment_target, amount_money) VALUES (?, ?)',
-    [req.body.paymentTarget, req.body.amountMoney],
+    [joinTarget(req.body.paymentTarget), req.body.amountMoney],
     (error, results) => {

編集の際はこんな感じでしょうか。

       <form action="/update/<%= cost.id %>" method="post">
         <div>
-          <input name="paymentTarget" type="text" value="<%= cost.payment_target %>">
+          <label><input name="paymentTarget" type="checkbox" value="A"
+            <%= cost.payment_target?.split(',').includes('A') ? 'checked' : '' %>>A</label>
+          <label><input name="paymentTarget" type="checkbox" value="B"
+            <%= cost.payment_target?.split(',').includes('B') ? 'checked' : '' %>>B</label>
         </div>

または、選択肢を配列にすると良いかも。

       <form action="/update/<%= cost.id %>" method="post">
         <div>
-          <input name="paymentTarget" type="text" value="<%= cost.payment_target %>">
+          <% ['A', 'B'].forEach(value => { %>
+            <label><input name="paymentTarget" type="checkbox" value="<%= value %>"
+              <%= cost.payment_target?.split(',').includes(value) ? 'checked' : '' %>><%= value %></label>
+          <% }) %>
         </div>

Comments

[ppos]

ありがとうございます！！！！！！

>app.use(express.urlencoded({ extended: true })); を使った場合、A と B の両方を選択したらreq.body.paymentTarget は "on" ではなく ["A", "B"] という配列になる
知りませんでした....。

また、ER_WRONG_VALUE_COUNT_ON_ROWに対して関数を作成すること、数値の確認をすること、編集ページの実装も、とても勉強になりました。