for文中の繰り返しform内の値を、JavaScriptで動的に代入したい

前提・実現したいこと

Node.jsのExpress＋Mongooseを使ってHTMLとJavaScriptの簡単なフォームを作成しています。
ejsファイルに書いたhtml上でfor文を使ってフォームを繰り返し表示させようとしていて、
inputタグのhidden valueに動的な値を埋め込むことに苦戦しています。

フォームを表示するタイミングは
内側のfor文(j)が終了し外側のfor文(i)処理の繰り返しと同時に表示させようとしています。
valueに代入したい値は、外側for文のiの値で、MongooseでMongoDBに挿入するためのIDとしてPOSTデータから抽出したいです。

ページの完成イメージはスレッド式の掲示板のようなもので、各スレッドにフォームを設置したいです。
説明が不足している箇所などありましたら、お申し付けください。

発生している問題・エラーメッセージ

ループ1個目のフォームのみ値が入っており、しかも0ではなく最終ループ時のiの値が入っている。
（そもそもフォームをループさせる正しい文法や、初めから方針が間違っているのかもしれませんが、初学の段階でこのようなやり方を思いついてそのまま進めてきてしまっている状態です。）

該当のソースコード

JSON
1threads //Schema
2{
3 name: [{type:String}],
4 text: [{type:String}]
5}

HTML
1<body>
2<% for (var i = 0; threads.length > i; i++) { %>
3  <% for (var j = 0; threads[i].name.length > j; j++) { %>
4    <p>Name: <%= threads[i].name[j]%></p>
5    <p>Text: <%= threads[i].text[j]%></p>
6  <% }%>
7  <form style="margin-left: 105px" action ="/insert" method="post" >
8    <div class="form-group row">
9      <label for="name" class="col-sm-2 col-form-label">Your name: </label>
10      <div class="col-sm-10">
11        <input type="hidden" id="threadid" name="threadid" value="">
12        <script type="text/javascript" language="javascript">
13          document.getElementById('threadid').value = <%=i%>; // ループ1個目のフォームのみ値が入っており、しかも0ではなく最終のiの値
14        </script>
15        <input type="text" class="form-control col-6" id="name" name="name" placeholder="name">
16      </div>
17      <label for="text" class="col-sm-2 col-form-label">Your text: </label>
18      <div class="col-sm-10">
19        <textarea row="2" class="form-control col-6" id="text" name="text"></textarea>
20      </div>
21    </div>
22    <div class="row">
23      <div class="col">
24        <input type="submit" style="margin-left:45%" value ="Post your text" class="btn btn-info">
25      </div>
26    </div>
27  </form>
28</body>

試したこと

scriptタグを、formタグの外かつ外側ループの内に記述してみても上手く機能しなかった。

insertformクラスにsetAttributeを使ってname属性にループのiを動的に付与してみても、いくつかのフォームには入ったがなにも付かなかったフォームもあり、どのようなプロセスでJavaScriptのループに伴う値の付与が行われているのか理解できていない。

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

回答1件

ベストアンサー

これはHTMLのルールの問題です。

id - MDN

id グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。この属性の用途は、リンク (フラグメント識別子を使用)、スクリプト、スタイル (CSS を使用) で要素を特定することです。

for文の中でこんな記述してますよね。

        <input type="hidden" id="threadid" name="threadid" value="">
        <script type="text/javascript" language="javascript">
          document.getElementById('threadid').value = <%=i%>; // ループ1個目のフォームのみ値が入っており、しかも0ではなく最終のiの値
        </script>

スレッドが10個ならば10個<input type="hidden" id="threadid" name="threadid" value="">あるわけですよ。

Node.jsはHTTP通信のリクエストを待ち受けて、HTMLという完成形を投げ返します。
それを受け取ったWebブラウザ(Chrome)はscriptタグを上から実行しますので、
こんな感じに記述してあるのと同義です。

js
1document.getElementById('threadid').value = 0;
2document.getElementById('threadid').value = 1;
3document.getElementById('threadid').value = 2;
4document.getElementById('threadid').value = 3;
5document.getElementById('threadid').value = 4;
6document.getElementById('threadid').value = 5;
7document.getElementById('threadid').value = 6;
8document.getElementById('threadid').value = 7;
9document.getElementById('threadid').value = 8;
10document.getElementById('threadid').value = 9;

どのinput要素の値を書き換えるんでしょうね？って話で
最初か最後はどちらか一つのinput要素に9が投げ込まれて終わりです。

アンダースコープ付けて無理やり一意にしてやれば多少進むのでは？
こんな感じにしてみてください。

ejs
1        <input type="hidden" id="threadid_<%=i%>" name="threadid" value="">
2        <script type="text/javascript" language="javascript">
3          document.getElementById('threadid_<%=i%>').value = <%=i%>; // ループ1個目のフォームのみ値が入っており、しかも0ではなく最終のiの値
4        </script>

投稿2020/08/18 02:56

miyabi-sun

総合スコア21158

true_zaku1997

2020/08/20 01:35

詳しく解説、回答いただき誠にありがとうございました。 ```ejs <input type="hidden" id="threadid_<%=i%>" name="threadid" value="<%=i%>"> ``` このようにするだけで、valueにも値が入り、jsファイル側でもidがユニークなのでvalueを取得することができました。上記で動的にvalueを入れられたのでgetElementByIdも不要でした。

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