submit()が上手くいかない問題について

Question

お世話になります。
HTMLのフォームをconfirmメソッド内でOKボタンが押されたときにPOST送信させたい(submit)んですが、
どうやら下記のコードでは送信が上手くいっていないようです。

confirmメソッドを諦めて自作ダイアログを作るしかないのか、、とも考えています。
何か良い案はないでしょうか。ご教授願いたいです。

<script>
    function delete_btn() {

        const arr = [];
        const del = document.getElementsByName("del");

        for (let i = 0; i < del.length; i++) {
          if (del[i].checked) {
            arr.push(del[i].value);
          }
        }

        if(arr.length == 0){
            alert("削除する予約情報を選択してください。");
            window.reload();
        }

        document.getElementById("span2").textContent = arr;

        var ret = confirm("選択された" + arr.length + "件の予約情報を削除します。\nよろしいでしょうか？");

        if (ret == true) {
            confirm("選択された" + arr.length + "件の予約情報を削除しました。");
            document.deleteForm.submit();

        } else {
            document.getElementById("checkbox").checked = false;
        }
      }

    </script>

         <button type="button" id="delete" onclick="delete_btn">削除</button>

<% for(yoyaku list : yoyakudata){ %>

        <form id="delete" method="post" name="deleteForm" action="<%= request.getContextPath() %>/VisitorReservation/delete">
            <label class="ECM_CheckboxInput">
            <input class="ECM_CheckboxInput-Input" id="checkbox" type="checkbox" name="del" value="<%= yoyaku.getYoyakuId() %>">
            <span class="ECM_CheckboxInput-DummyInput"></span><span class="ECM_CheckboxInput-LabelText"></span>
            </label>
        </form>

}%>

Comments

[dodox86]

提示されているコードが一部分なので再現できませんが、form部分がforループで複数回生成されているように見えます。ブラウザ上で最終的にhtmlがどのように出力されているか確認してみてはどうでしょう。

[takasima20]

form は全部同じ名前なんで、最初のやつしかキックできてないんじゃ? なんで form をループの中にいれてんのかな?

[apa____m]

チェックボックスの値をPOST送信したいわけなんですが、チェックボックスをデータ数分出力しているのでループの中に入れています..

[takasima20]

いや、そんだけだったら "form" はひとつでいいんじゃない? del の名前重複を気にしてんならIDなりを元に名前変えればいいし、その方が扱いやすくないかなあ?

[apa____m]

formをforの外に出したら上手くsubmitできるようになりました。ありがとうございます！

Answer 1

formをforの外に出したら上手くsubmitできるようになりました。

Comments

[dodox86]

自己解決で質問をクローズしてください。

Answer 2

confirm("選択された" + arr.length + "件の予約情報を削除しました。");

これを実行する前にdocument.deleteForm.submit();したらどうでしょう？

Comments

[apa____m]

入れ替えて試してみましたが、結果に変化はありませんでした・・。