テキストエリアの入力内容の保存

実現したいこと

表のそれぞれのマスに設置したテキストエリアの入力内容の保存

前提

ｈｔｍｌでカレンダーアプリを作ろうと考えています。
カレンダーなので一行最大七日間分の幅で表を作り、それぞれのマスにテキストエリアを設置し、その入力内容を保存できるようにしたいのですがうまくいきません。
入力内容を保存してくれるプログラムは知っているのですがこれを表に適用すると
すべてのテキストエリアの内容が同じになってしまいます。
一つ一つ別々の内容で保存したいのですが何かいい方法はないでしょうか。
もしよろしければ詳しい方回答よろしくお願いします。

発生している問題・作成したhtmlファイルへのURL

file:///C:/Users/projectionmapping/Downloads/js/11111.html

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<meta charset=utf-8>
<body>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="garlic.js"></script>

<script>
$(function(){
$("form").garlic();
});
</script>
<h3>適当なフォーム</h3>

<form data-persist="garlic" method="post">
<table>
  <tr>
   <td><textarea cols="10" rows="3"></textarea></td>
   <td><textarea cols="10" rows="3"></textarea></td>
   <td><textarea cols="10" rows="3"></textarea></td>
  </tr>
  <tr>
    <td><textarea cols="10" rows="3"></textarea></td>
    <td><textarea cols="10" rows="3"></textarea></td>
    <td><textarea cols="10" rows="3"></textarea></td>
  </tr>
</table>


<p> <input type="text" name="a"> </p>
<p> <textarea rows=5 cols=50 name="b"></textarea></p>
<p> <textarea rows=5 cols=50 name="c"></textarea></p>
</form>

</body>
</html>

試したこと

floatやwhite spaceなどで試しても見たのですが結果は表の時と同じですべてのテキストエリアの内容が同じになってしまいました。

やっぱり方法はないのでしょうか。
参照サイトhttps://www.telln.com/lesson/2021/05/28/%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E5%85%A5%E5%8A%9B%E5%86%85%E5%AE%B9%E3%82%92%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%82%8B%E3%80%8Cgarlic-js%E3%80%8D%E3%81%AF%E4%BE%BF/

回答2件

garlic.jsの仕様は知らないですが、一般的にフォームリクエストはname属性の属性値で送信されますし、Javascriptから扱うのであればidも全てに（もちろん個別に）つけてあげる必要があるのではと。
記事の解説にはLocalStorageAPI利用とあるので、入力コントロールの属性値をキーにして値を保存し、紐づけているものと思われます。garlic.jsのドキュメントも確認してください。

投稿2023/03/11 02:32

m.ts10806

総合スコア80586

ベストアンサー

garlic.js の中身は見てないですが、おそらく個々の textarea に固有の name 属性が必要なのでは。

html
1   <td><textarea cols="10" rows="3" name="day1"></textarea></td>
2   <td><textarea cols="10" rows="3" name="day2"></textarea></td>
3   <td><textarea cols="10" rows="3" name="day3"></textarea></td>
4...