nitaemon
@nitaemon (にたえもん)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

hiddenのformにjavascriptで値を入れてsubmitしたい

解決したいこと

クリックされた場所の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("重要")) { %>&#x2713;<% } 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

document.getElementById('myForm').submit();

それでどのような要求がサーバーに出ていっているか、Fiddler などのツールを使って調べてみましょう。

クリックするのが a タグなのが問題のような気がします(気がするだけで確証はありませんが)。event.preventDefault() を追加したらどうなりますか?

3Like

Comments

  1. たぶんそれが原因ですね。
    submit()を実行しても「ハイパーリンク(aタグ)をクリック」の処理が消えるわけではないので<a href=""によって現在表示中のページへの遷移も行われます。

    対策としては

    • event.preventDefault()を追加。(@SurferOnWwwさん案、最小限の変更)
    • リンクとしては意味のないものにa要素を使うのが悪い。どうしてもaにする必要がない限りボタンにしろ。(王道)
    • postではなくgetメソッドでもいいなら、<td><a href="click_board?keytime=<%= p.getKeytime() %>"><%= p.getTitle() %></a></td>で十分だよ。javascript必要ないよ。(超シンプル)

    などが考えられます。

  2. @nitaemon

    Questioner

    @SurferOnWww
    ご回答ありがとうございます。
    @SurferOnWww様のおっしゃる通り、event.preventDefault() を追加したところ、
    無事に動きました。ありがとうございました。大変助かりました。

  3. @nitaemon

    Questioner

    @albireo
    コメントありがとうございます。
    私の頭が固かったため、超シンプルな方法を思いつかずにいました。
    とても参考になります。ありがとうございます。

回答というわけではないですが、
似たことをしたことがあるのでコメントします。
私の場合は、リンクではなく、select句だったのですが、
select句内にonchangeやonkeyupで動く引数付きJavaScriptを用意して
その中でhiddenフォームのvalueに値をセットしていました。

参考になれば幸いです。

1Like

Comments

  1. @nitaemon

    Questioner

    コメントありがとうございます。
    今回はfor文でテーブルに表示させている(表示される値は予測不可能な)ため、select句のように固定の引数を活用することが難しいです。
    select句でvalueにセットするときは、ぜひ活用させていただきます。

  2. あら、そういうことなんですね
    確かにその状態だと難しいですね。
    失礼しました<(_ _)>

コード量は増えますが、 form は table の td 内でも設置できますよ……?

0Like

Your answer might help someone💌