document.getElementById('myForm').submit();
それでどのような要求がサーバーに出ていっているか、Fiddler などのツールを使って調べてみましょう。
クリックするのが a タグなのが問題のような気がします（気がするだけで確証はありませんが）。event.preventDefault() を追加したらどうなりますか？
Like!
hiddenのformにjavascriptで値を入れてsubmitしたい
Q&AClosed
解決したいこと
クリックされた場所の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に飛ぶべきです。※サーブレットのリンクに間違いはなし
補足
ボタンではなくリンクにしているのは、表示の際にテーブルの中に配置する必要があるためです。
どうかよろしくお願いいたします。
0
3Answer
3
Comments
たぶんそれが原因ですね。
submit()を実行しても「ハイパーリンク(aタグ)をクリック」の処理が消えるわけではないので<a href=""によって現在表示中のページへの遷移も行われます。対策としては
- event.preventDefault()を追加。(@SurferOnWwwさん案、最小限の変更)
- リンクとしては意味のないものにa要素を使うのが悪い。どうしてもaにする必要がない限りボタンにしろ。(王道)
- postではなくgetメソッドでもいいなら、
<td><a href="click_board?keytime=<%= p.getKeytime() %>"><%= p.getTitle() %></a></td>で十分だよ。javascript必要ないよ。(超シンプル)
などが考えられます。
@nitaemon
Questioner@SurferOnWww様
ご回答ありがとうございます。
@SurferOnWww様のおっしゃる通り、event.preventDefault() を追加したところ、
無事に動きました。ありがとうございました。大変助かりました。@nitaemon
Questioner@albireo様
コメントありがとうございます。
私の頭が固かったため、超シンプルな方法を思いつかずにいました。
とても参考になります。ありがとうございます。
回答というわけではないですが、
似たことをしたことがあるのでコメントします。
私の場合は、リンクではなく、select句だったのですが、
select句内にonchangeやonkeyupで動く引数付きJavaScriptを用意して
その中でhiddenフォームのvalueに値をセットしていました。
参考になれば幸いです。
Like!
Comments
@nitaemon
Questionerコメントありがとうございます。
今回はfor文でテーブルに表示させている（表示される値は予測不可能な）ため、select句のように固定の引数を活用することが難しいです。
select句でvalueにセットするときは、ぜひ活用させていただきます。あら、そういうことなんですね
確かにその状態だと難しいですね。
失礼しました<(_ _)>
コード量は増えますが、 form は table の td 内でも設置できますよ……？
Like!