チェックボックスで複数選択した項目をモダール表示後、削除したい

Question

前提・実現したいこと

Djangoを使用して、ListViewで表示している項目をチェックボックスで複数選択後、削除ボタンを押下し、モーダルが表示され、モーダルの削除ボタンを押下してから削除が実行されるようにしたいです。

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

現状は、複数選択後、削除ボタンを押すとモーダルが出て再度削除を押してもListViewからは削除されていません。おそらく、ListViewで一覧表示させている画面で複数選択した情報がモーダル内の削除ボタンでformのsubmitが行われていないためだと推測しています。因みに、モーダルなしだと、正常に削除されました。色々調べましたが解決策が見つかりませんでした。ご教授頂けると幸いです。

該当のソースコード

<form method="post" action="{% url 'commons:delete' %}">
    {% csrf_token %}
<table id="sorter" class="table table-striped">
  <thead>
    <tr>
        <th scope="col" style="font-size: 80%"><input type="checkbox" id="all" name="allChecked">　表示中の項目を全選択</th>
        <th scope="col">項目　⇅</th>
        <th scope="col">更新日時　⇅</th>
    </tr>
  </thead>
  <tbody>
  {% for word in object_list %}
    <tr>
        <div id="boxes">
            <td scope="row"><input type="checkbox" id="search_word_csv" name="search_word_list" value="{{ word.negative_word }}"></td>
        </div>
      <td>{{ word.negative_word }}</td>
      <td>{{ word.update_time }}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>
<br />

<div class="row" style="margin-top: 1vh">
    <div class="col-md-4"></div>
        <div class="col-md-5">
            {% include 'snippets/pagination.html' %} <br />
            <button type="button" id="delete" class="btn btn-block btn-outline-danger" data-toggle="modal" data-target="#del_dialog_Modal">選択した項目を削除</button>
        </div>
    <div class="col-md-4"></div>
</div>
</form>

<!--削除ダイアログ-->
<div class="modal fade" id="del_dialog_Modal">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        選択された項目を削除
    </div>
    <div class="modal-body">
        <p>選択された項目を削除します。削除後は元に戻すことはできません。</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">戻る</button>
        <a href="{% url "commons:negative_word_delete" %}" class="btn btn-danger">選択された項目を削除</a>
    </div>
</div>
</div>
</div>

Answer 1

因みに、モーダルなしだと、正常に削除されました。

というのは

<button type="button" id="delete" class="btn btn-block btn-outline-danger" data-toggle="modal" data-target="#del_dialog_Modal">選択した項目を削除</button>
```これをsubmitにしたら正常に動作したということでしょうか。

モーダルのこの内容ではただリンクに飛ぶだけのGETメソッドですので、form送信していることにはなりません
```html
<a href="{% url "commons:negative_word_delete" %}" class="btn btn-danger">選択された項目を削除</a>

以下のような使い方をすればform外からsubmitさせることができます
例1
htmlだけ使用する
buttonにform属性をつけてformのidを記載する

<form method="post" id="myform" action="{% url 'commons:delete' %}">
<!-- 省略 -->
</form>
<button type="submit" form="myform">送信する</button>

例2
JavaScriptを使用する
formにname属性をつけてdocument.name属性の値.submit()でsubmitできる

<form method="post" name="myform" action="{% url 'commons:delete' %}">
<!-- 省略 -->
</form>
<button onclick="document.myform.submit()" type="button">送信する</button>

Comments

[hentaiman]

bootstrapっぽいので使い方に沿ったやり方の方が良いような気はします

[sk-sora--ypi]

すみません、
私には「bootstrapの使い方に沿ったやり方」がわからないので回答してあげてくださいm(_ _)m
回答数が増えてやり方が増える方が質問者の勉強にもつながると思いますので

[hentaiman]

それは質問者がそのやり方をする努力をした結果出来なかったというのなら回答するかもしれません、努力の形跡が見えれば。
formの送信さえ出来れば良い前提の質問なのでこの回答自体がNGなわけではありません。（ので低評価していない）
気を害したようで失礼しました。一応補足程度のコメントです。

[sk-sora--ypi]

特に気を害した訳ではないので大丈夫です.
むしろbootstrapっぽいやり方というのがあることを知れましたので、ありがたいです( •̀ᴗ•́ 人)

[hentaiman]

https://getbootstrap.jp/docs/4.2/components/modal/#via-javascript
のEvent Typeのhide.bs.modal
さっと調べたところ上記の記載があったので、こういうのは用意されたイベントを利用するのが良いかなと。
自分もbootstrapは一回しか使った事ないので詳しい訳ではないですが

[sk-sora--ypi]

なるほど、これを利用すれば綺麗に書けますね.
わざわざリンクまでありがとうございます☆⌒(*＾-ﾟ)

まぁ後は質問者が勉強がんばれっていう感じですね.

[Taka787]

皆さま、いろんなアドバイスいただきありがとうございます。
わたしもbootstrapぽいやり方があるのを初めて知りました。
奥が深いですね。。
勉強頑張ります！！