hiddenのformにjavascriptで値を入れてsubmitしたい
Q&A
Closed
解決したいこと
クリックされた場所のIDをjavascriptで取得、hiddenフォームのvalueに入れ、submitを行いたい。
「自分で試したこと」では、actionで画面が移り変わらない状態です。
例)
サーブレット/JSPで回覧板を作成しています。
クリックされた場所に応じてIDを取得し、そのIDをサーブレットに送信
サーブレットでデータベースにアクセスするという流れです。
取得したいIDの場所
<td><a href="" id="<%= p.getKeytime() %>"><%= p.getTitle() %></a></td>
例)
<% if (Studentlist != null) { %>
<% for (Bean p:Studentlist){ %>
<tr>
<td><% if (p.getImportant().equals("重要")) { %>✓<% } else { %>-<% } %></td>
<td><a href="" id="<%= p.getKeytime() %>"><%= p.getTitle() %></a></td>
<td><%= p.getKeytime() %></td>
<td><%= p.getBoardname() %></td>
</tr>
<% } %>
<% } %>
自分で試したこと
<form id="myForm" action="click_board" method="post">
<input type="hidden" id="keytime" name="keytime" value="">
<script>
// リンク要素を取得
const links = document.querySelectorAll('a');
// 各リンクにクリックイベントリスナーを追加
links.forEach(link => {
link.addEventListener('click', handleClick);
});
// クリックされたリンクからkeytimeを取得する関数
function handleClick(event) {
// クリックされたリンクのID(keytime)を取得
var keytime = event.target.id;
console.log(keytime);
document.getElementById('keytime').value = keytime;
document.getElementById('myForm').submit();
}
</script>
</form>
結果
2024-05-09 12:17
http://localhost:8080/pc/student/reflection_board に移動しました
console.logでIDの値が取得できていることは確認。
しかし、reflection_boardはこのコードを記述しているファイルであり、本来であればactionで設定したclick_boardに飛ぶべきです。※サーブレットのリンクに間違いはなし
補足
ボタンではなくリンクにしているのは、表示の際にテーブルの中に配置する必要があるためです。
どうかよろしくお願いいたします。